html css箭头怎么写,css写流程步骤箭头

Title

*{

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;

}

确认订单

支付

支付完成