无敌面包屑

哈哈，群里一个童鞋发的，稍微加工一下就无敌了。

by xiaobai

HTML

<div class="demo">
	<ul class="clearfix">
    	
        <li>未开始<em></em><i></i></li>
        <li>未开始<em></em><i></i></li>
        <li class="current">进行中<em></em><i></i></li>
    </ul>
</div>
<div class="demo">
	<ul class="clearfix">
    	<li>未开始<em></em><i></i></li>
        <li class="current">进行中<em></em><i></i></li>
        <li class="current-done">完成<em></em><i></i></li>
    </ul>
</div>
<div class="demo">
	<ul class="clearfix">
        <li class="current">进行中<em></em><i></i></li>
        <li class="current-done">完成<em></em><i></i></li>
        <li class="current-done">完成<em></em><i></i></li>
    </ul>
</div>

CSS

*{padding:0; margin:0; font-size:12px;}
ul{list-style:none; list-style-position:outside;}
.clearfix:before,
.clearfix:after{content:''; display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

.demo{ margin:20px auto; background:#f0f0f0; height:32px; overflow:hidden; line-height:32px; position:relative;}
.demo li{float:right; width:33.33%; text-align:center; position:relative;font-weight:bold; font-size:14px;}
.demo li em,.demo li i{position:absolute; top:0; right:-16px; width:0; height:0; line-height:0; border-width:16px 0 16px 16px; border-color:transparent  transparent transparent #fff; border-style:dashed dashed dashed solid;}
.demo li em{right:-24px; top:-8px; border-width:24px 0 24px 24px;}
.demo li i{border-color:transparent transparent transparent #f0f0f0;}
.demo li.current{background:#f60;}
.demo li.current i{border-color:transparent transparent transparent #f60;}

.demo li.current-done{background:green;}
.demo li.current-done i{border-color:transparent transparent transparent green;}