css三角形繪製

標籤：

三角形演變：

1、將一個塊元素的寬、高都設定為0，再設定邊框樣式，得如下(綠色部分)：

樣式：

{width: 0;height: 0;border: 35px solid #7de87d;}

通過此樣式得到的是一個正方形。

 

2、將正方形的左右邊框設定成其他顏色，如：

{width: 0;height: 0;border-left: 35px solid #ff9900;border-right: 35px solid #ff9900;border-top: 35px solid #7de87d;border-bottom: 35px solid #7de87d;}

：

給塊元素添加設定了其他顏色後，塊元素被左右的三角形切割了。

 

3、如果再將左右兩邊設定成透明，又會是什麼效果呢？

樣式：

{width: 0;height: 0;border-left: 35px solid transparent;border-right: 35px solid transparent;border-top: 35px solid #7de87d;border-bottom: 35px solid #7de87d;}

最終看到的是一個像漏鬥形狀的圖形，如果將邊框頂部去掉，那我們就可以直接得到向上的三角形了，

樣式：

{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid #7de87d;}

 

其他方向的三角形：

向下三角形樣式：

{width: 0;height: 0;border-top: 50px solid #7de87d;border-left: 50px solid transparent;border-right: 50px solid transparent;}

 

向左樣式：

{width: 0;height: 0;border-right: 40px solid #7de87d;border-top: 40px solid transparent;border-bottom: 40px solid transparent;}

 

向右樣式：

{width: 0;height: 0;border-left: 40px solid #7de87d;border-bottom: 40px solid transparent;border-top: 40px solid transparent;}

 

左下三角形樣式：

{width: 0;height: 0;border-bottom: 50px solid #7de87d;border-right: 50px solid transparent;}

 

右下三角形樣式：

{width: 0;height: 0;border-bottom: 50px solid #7de87d;border-left: 50px solid transparent;}

 

左上三角形樣式：

{width: 0;height: 0;border-top: 50px solid #7de87d;border-right: 50px solid transparent;}

 

右上三角形樣式：

{width: 0;height: 0;border-top: 50px solid #7de87d;border-left: 50px solid transparent;}

 

線性三角形：

除了上面給到的有背景顏色的三角形外，如果需要線性形狀的三角形該怎麼做呢？

這裡就需要用到css3的變換(transform)屬性了，如下樣式：

{width: 50px;height: 50px;border-top: 2px solid #7de87d;border-right: 2px solid #7de87d;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}

給塊元素設定對角邊框樣式，再用transform屬性旋轉到對應角度就可以了，：

 

 其他線性三角形：

向下樣式：

{width: 50px;height: 50px;border-top: 2px solid #7de87d;border-right: 2px solid #7de87d;transform: rotate(135deg);-webkit-transform: rotate(135deg);}

 

向左樣式：

{width: 50px;height: 50px;border-top: 2px solid #7de87d;border-right: 2px solid #7de87d;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

 

向右樣式：

{width: 50px;height: 50px;border-top: 2px solid #7de87d;border-right: 2px solid #7de87d;transform: rotate(45deg);-webkit-transform: rotate(45deg);}

 

 總結：

再滿足相容性的情況下，通過樣式製作三角形，比用圖形製作三角形會來的簡單、方便一些。比如在網頁製作中，要實現下拉框上的向標，我們就可以直接用樣式製作。又如做"更多"按鈕後的向右表徵圖，我們就可以用線性三角形的做法。

css三角形繪製