html展开显示样式,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;

}

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