纯Css小三角制作

html代码：

Css:body,ul,li{margin:0;padding:0;} ul{list-style:none;} div{margin:20px auto 0;width:800px;} /*demo和demo2共有样式*/ .demo em,.demo2 em{position:absolute;display:block;width:0;height:0;} .demo li,.demo2 li{position:relative;float:left;margin-right:40px;} /*demo样式*/ .demo{height:100px;} .demo li{width:80px;height:80px;background:#ccc;} .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;}

/*demo2样式*/ .demo2{height:80px;} .demo2 li{width:60px;height:40px;background:#ccc;} .demo2_top_right em{top:40px;left:20px;border-top:20px solid red;border-right:20px solid transparent;} .demo2_right_top em{top:10px;left:-20px;border-right:20px solid green;border-top:20px solid transparent;} .demo2_right_bottom em{top:10px;left:-20px;border-right:20px solid green;border-bottom:20px solid transparent;} .demo2_bottom_right em{top:-20px;left:20px;border-bottom:20px solid blue;border-right:20px solid transparent;} .demo2_bottom_left em{top:-20px;left:20px;border-bottom:20px solid blue;border-left:20px solid transparent;} .demo2_left_bottom em{top:10px;left:60px;border-left:20px solid yellow;border-bottom:20px solid transparent;} .demo2_left_top em{top:10px;left:60px;border-left:20px solid yellow;border-top:20px solid transparent;} .demo2_top_left em{top:40px;left:20px;border-top:20px solid red;border-left:20px solid transparent;}

/*demo3样式*/ .demo3 li{float:left;padding:0 5px;background:#ccc;line-height:30px;} .demo3 li a{display:block;padding:0 5px;text-decoration:none;} .demo3 li a em{display:inline-block;border-top:5px solid #000;border-right:5px solid transparent;border-left:5px solid transparent;vertical-align:middle;} .demo3 li ul{display:none;} .demo3 li a:hover{color:red;} .demo3 li:hover ul{display:block;position:absolute;} .demo3 li a:hover em{border-top:none;border-right:5px solid transparent;border-bottom:5px solid #000;border-left:5px solid transparent;} .clear{clear:both;}