纯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>
第一步
第二部
第三部

One Response to “ 纯css实现面包屑导航,购物车步骤导航 ”

  1. 米田友花说道:

    [花心]要看熟女风情片私藏美图,就去→ http://meinv.pro

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>