纯css实现面包屑导航,购物车步骤导航
css
.step{ background:#ddd; height:30px; width:200px; float:left; position:relative; text-align:center; line-height:30px; color:#fff; font-size:12px;} .step:after{ content:''; position:absolute; width:0; height:0; overflow:hidden; line-height:0; left:-15px; top:0; border-style:solid; border-width:15px 0 15px 15px; border-color:#ddd #ddd #ddd transparent;} /*尖*/ .step:before{content:''; position:absolute; width:5px; height:0; overflow:hidden; line-height:0; right:0; top:0; border-style:solid; border-width:15px 0 15px 15px; border-color:#fff #fff #fff #ddd;} .step.cur{ background:#0cf;} .step.cur:after{ border-color:#0cf #0cf #0cf transparent;} .step.cur:before{ border-color:#fff #fff #fff #0cf;}
html
<div style="width:600px; margin:0 auto;"> <div class="step cur">第一步</div> <div class="step">第二部</div> <div class="step">第三部</div> </div>
转载请注明来源:前端老徐的博客
《纯css实现面包屑导航,购物车步骤导航》
[花心]要看熟女风情片私藏美图,就去→ http://meinv.pro