基礎 在css中繪製三角形及相關應用

本文簡要闡述了用css邊框的方法在頁面上繪製三角形，包括幾種典型的三角形繪製，還介紹了幾個簡單的應用場景。利用邊框繪製三角形方法只是眾多方案中的一種，大家根據專案實際，選用最適宜專案的方案。

在css中，我們可以利用border-top、border-left、border-bottom、border-left四個屬性來繪製三角形。實現的基本原理參見下面的演示**及其執行結果。

核心**：

.box 

複製**

演示**

從以上**及執行結果不難想出繪製三角形的辦法，我們只要將.box的長度和寬度都設成0，就可以得到四個等腰三角形。再將不想保留的三角形邊框顏色設定成透明色（即：border-color : transparent）就可以隱藏掉不想保留的三角形。從而完成三角形的繪製。

等邊三角形（又稱正三邊形），為三邊相等的三角形，其三個內角相等，均為60°，它是銳角三角形的一種。等邊三角形也是最穩定的結構。

2.1.1 尖角向上：

.********-up 

複製**

演示**

2.1.2 尖角向下：

.********-down 

複製**

演示**

2.1.3 尖角向左：

.********-left 

複製**

演示**

2.1.4 尖角向右：

.********-right 

複製**

演示**

等腰直角三角形是特殊的等腰三角形，它的兩底角相等，都是45°；它的兩腰長度相等。

2.2.1 左上直角：

.********-top-left

複製**

演示**

2.2.2 右上直角：

.********-top-right 

複製**

演示**

2.2.3 左下直角：

.********-bottom-left

複製**

演示**

2.2.4 右下直角：

.********-bottom-right 

複製**

演示**

彈出框(popover)或提示框(tooltip)一般都會用到三角形，三角形明確並加強了指向作用。類似於bootstrap的popover和tooltip元件都用到了邊框三角形的實現方式。

演示**

上述演示只是實現了頂部彈出框，其它方向彈出框參考上述實現方式即可。

演示**

三角形的應用場景還有很多，比如下拉列表(dropdown menu)中，或者是「頂」及「踩」按鈕等。

邊框實現三角形只是眾多方案之一，大家可以根據專案實際，選擇小圖示方案或選用svg方案。

基礎 在css中繪製三角形及相關應用

本文簡要闡述了用css邊框的方法在頁面上繪製三角形，包括幾種典型的三角形繪製，還介紹了幾個簡單的應用場景。利用邊框繪製三角形方法只是眾多方案中的一種，大家根據專案實際，選用最適宜專案的方案。在css中，我們可以利用border top border left border bottom border...

基礎 在CSS中繪製三角形及相關應用

本文簡要闡述了用css邊框的方法在頁面上繪製三角形，包括幾種典型的三角形繪製，還介紹了幾個簡單的應用場景。利用邊框繪製三角形方法只是眾多方案中的一種，大家根據專案實際，選用最適宜專案的方案。在css中，我們可以利用border top border left border bottom border...

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...