注册步骤条

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

　　}

}