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；设置一个边的颜色，让其他的三个边都与背景色一致。想让箭头朝向哪个方向就设置他对应边框的背景色。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
