HTML步骤完成样式显示

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;
}

通过此方式设置即可完成如上图显示的样式。