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三角形（松樹）