如何使用CSS的border屬性畫個三角形

用border畫三角形，其實屬於一種奇淫巧技。

利用的是border的特性：當一個元素的寬高都為0時，給border設定寬度（至少給2個相鄰的邊框設定寬度），border就會撐開這個元素。

四個邊框同時設定寬度時，四個邊最後在元素的中心匯成一個點。

 

因此當我們為一個有寬高的元素設定border時，四個邊框的銜接方式是以對角線形式，而不是直角拼接，如圖：

 

# 

所以不設定寬高，給四個邊框分別設定不同的顏色時就可以得到4個不同顏色不同方向的三角形：

# 

 

 想得到一個三角形的時候，不能單獨設定一個邊框，只設定一條邊框的時候，它只是一條只有寬度沒有高度的線，在頁面中無法顯示；

因此還是要同時設定4條邊框或是為兩個相鄰的邊框設定寬度，只為其中一個邊框加上顏色即可：

#設定4條邊：

# 

#只設定兩個相鄰的邊：

 

 

 

 

#

以上是如何使用CSS的border屬性畫個三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！