css三角形（松树）

CSS代码部分

*{margin:0; padding: 0;}/*简单初始化*/
 #box{margin: 0 auto; width: 400px; background: #ccc; border:1px solid #000; padding-left: 150px;}
 #box1,#box2,#box3{width: 0; height: 0; border-style: solid; border-color: #ccc #ccc green #ccc;  }
 #box1{border-width: 60px;border-top-width: 0;margin-left: 40px; }
 #box2{border-width: 80px;border-top-width: 0;margin-left: 20px;}
 #box3{border-width: 100px;border-top-width: 0;}
 #box4{width: 30px; height: 200px; background: green; margin-left: 85px;}

HTML代码部分：

<div id="box">
 <div id="box1"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div id="box4"></div>
 </div>

实现的原理分析：把盒子的宽高都设置为0；设置一个边的颜色，让其他的三个边都与背景色一致。想让箭头朝向哪个方向就设置他对应边框的背景色。

css三角形（松树）

原文：http://www.cnblogs.com/xiaomi2050/p/4201343.html