1.png
在项目中涉及到了步骤完成类型的样式显示，每个步骤中间要显示白色箭头，UI给我图的时候给我切了6张底图，在实现过程中觉得太麻烦，就用CSS写了，主要是用到伪类before和after，before完成模块前面的凹箭头，after完成模块后面的白色右箭头。具体如下：
.u_statedata:before {
content: '';
display: block;
position: absolute;
left: -3px;
z-index: 9;
top: 0px;
border-top: 13px solid #cacaca;
border-left: 13px solid transparent !important;
border-bottom: 13px solid #cacaca;
}
.u_statedata:after {
content: '';
display: block;
width: 16px;
height: 26px;
position: absolute;
right: -9px;
z-index: 9;
top: 0px;
border-top: 13px solid transparent !important;
border-left: 13px solid #cacaca;
border-bottom: 13px solid transparent !important;
background-color: #FFF;
}
为实现第一个模块的左边和最后一个模块的右边正常显示，则将第一个模块的伪类before和最后一个模块的伪类after设置为none:
.u_statedata:nth-of-type(1):before,
.u_statedata:nth-last-of-type(1):after{
display: none;
}
带颜色的模块部分为：
.u_statecomplete:before, .u_statecomplete:after {
border-color: #ffa200;
}
通过此方式设置即可完成如上图显示的样式。
