注册步骤条
HTML：
<div class="top">
<ul>
<li class="finish">步骤一<span class="end"><em class="pre"></em><em class="nex"></em></span></li>
<li>步骤二<span class="end"><em class="pre"></em><em class="nex"></em></span></li>
<li>步骤三</li>
</ul>
</div>
CSS：
.top ul {
color: #4a4a4a;
text-align: center;
padding: 3em;
}
.top ul>li {
list-style: none;
background-color: #9fc6e5;
width: 33.33%;
float: left;
padding: 10px 0;
position: relative;
box-shadow: 1px 2px 6px rgb(137, 137, 137);
cursor: default;
}
.top ul>li .end {
position: absolute;
width: 10px;
right: 0;
top: 0;
height: 40px;
z-index: 100;
background-color: white;
text-align: center
}
.top ul>li .end .pre {
border-color: transparent transparent transparent #9fc6e5;
position: absolute;
left: 0px;
z-index: 116;
display: inline-block;
border-width: 20px 0 20px 14px;
border-style: solid;
background-color: transparent;
color: #fff;
}
.top ul>li .end .nex {
position: absolute;
left: 10px;
z-index: 106;
display: inline-block;
border-width: 20px 0 20px 14px;
border-style: solid;
border-color: transparent transparent transparent #fff;
background-color: transparent;
color: #E4E4E4;
}
.top ul>li.finish {
background-color: #2379dd;
color: #fff;
}
.top ul>li.finish .end .pre {
border-color: transparent transparent transparent #2379dd;
}
@media (max-width:768px) {
.top ul>li .end {
display: none
}
.top ul>li .end .pre {
display: none
}
.top ul>li .end .nex {
display: none
}
}
