纯CSS小三角制作

<ul class="demo">
<li class="demo_top"><em></em></li>
<li class="demo_right"><em></em></li>
<li class="demo_bottom"><em></em></li>
<li class="demo_left"><em></em></li>
</ul>

**css**
<style>
ul{list-style:none;}
.demo em{position:absolute;display:block;width:0;height:0;}
.demo{height:100px;}
.demo li{width:80px;height:80px;background:#ccc;position:relative;float:left;
margin-right:40px;}
.demo_top em{top:80px;left:20px;border-top:20px solid red;border-right:20px solid transparent;
border-left:20px solid transparent;}
.demo_right em{top:20px;left:-20px;border-top:20px
solid transparent;border-right:20px solid green;
border-bottom:20px solid transparent;}
.demo_bottom em{top:-20px;left:20px;border-right:20px solid transparent;border-bottom:20px solid blue;
border-left:20px solid transparent;}
.demo_left em{top:20px;left:80px;border-top:20px
solid transparent;border-bottom:20px solid transparent;
border-left:20px solid yellow;}
</style>