纯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>