<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.main{
width: 1200px;
margin: 0 auto;
}
.uc-process{
width: 100%;
height: 26px;
padding: 20px;
}
.pass{
background: #9cddf5;
color: #fff;
}
.unit{
float:left;
display: inline;
height: 26px;
width: 32%;
line-height: 26px;
text-align: center;
color: #fff;
font-size: 14px;
}
.current{
background:#00a2ca
}
.arrow-pass,.arrow-complete{
width: 10px;
background: #9cddf5;
position: relative;
float:left;
display: inline;
height: 26px;
overflow: hidden;
}
.next{
position:absolute;
left:0;
top:-3px;
width:0;
height:0;
display: block;
border: 10px solid transparent;
border-width: 16px 10px;
border-left-color: #fff;
}
.prev{
position:absolute;
left: 0;
top: 0;
width:0;
height:0;
display: block;
border: 10px solid transparent;
border-width: 13px 8px;
border-left-color: #9cddf5;
}
.arrow-complete{
background: #00a2ca;
}
</style>
</head>
<body>
<div class="main">
<div class="uc-process">
<span class="unit pass">确认订单</span>
<span class="arrow-pass">
<span class="next"></span>
<span class="prev"></span>
</span>
<span class="unit pass">支付</span>
<span class="arrow-complete">
<span class="next"></span>
<span class="prev"></span>
</span>
<span class="unit current">支付完成</span>
</div>
</div>
</body>
</html>soso辉
84 声望2 粉丝
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。