轉載自知乎瀧阱

三角形和箭頭這兩個圖示在網頁中經常會用到，例如：下拉選擇框、排序、返回到上一頁、導航條，分頁都會用到三角形或者箭頭，當然是用圖片的方式的確可以實現這一樣式，但是是用圖片如果調整顏色那就比較困難了，除非再做一張圖片，這樣的做不僅浪費開發成本並且會降低網頁效能。我們可以採用 CSS 畫出三角形或者箭頭：

使用 border 畫三角形和箭頭

一條邊框在和模型中其實並不是一條線，如果我們將邊框設定得足夠大，並且設定不同的顏色，我們就很容易看到邊框的本質，從下圖很容易可以看出其事 border 在一個正方形 DOM 上其實是一個梯形：

畫三角形

利用這一原理我們可以將 DOM 的高和寬設定為 0 畫素，通過設定邊框的顏色透明來畫出不同的三角形，當然也可以來設定 border 的寬度來畫出不同角度的三角形：

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid #ccc;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

畫箭頭

那麼如何才用 border 來畫箭頭呢，只需要用一個三角形邊框（顏色需要和背景顏色一致）來重疊擋住另外一個三角形邊框即可。

優勢和缺點

• [優勢]相容 IE；
• [優勢]顏色可控；
• [缺點]不能畫出空心透明的三角形；
• [缺點]高度和寬度很難控制，需要一定的計算；

使用 transform 和 border 畫三角形和箭頭

CSS 3 的出現，讓 DOM 有了變形的效果，我們可以通過一些簡單的旋轉變形來畫出三角形或者箭頭。

畫箭頭

利用邊框加上旋轉，我們設定兩個相鄰的邊框，然後做 45 度的旋轉，這樣就可以得到不同型別的箭頭了：

.arrow {
    width: 50px;
    height: 50px;
    border-top: 5px solid #ccc;
    border-left: 5px solid #ccc;
    transform: rotate(45deg)
}

畫三角形

如果要畫三角形的話，我們需要在這個箭頭上增加一條邊長線就可以了。

優勢和缺點

• [優勢]顏色可控；
• [缺點]不能畫出實心的三角形；
• [缺點]高度和寬度很難控制，需要一定的計算；
• [缺點]不相容低版本 IE

其它方式

當然還有其它的方式來畫三角形和箭頭：

• Canvas
• SVG
• CSS 點陣

總結

這兩種畫法都存在有有缺點，應該根據具體的應用場景來確定使用哪種方式。當然我們之所以採用 CSS 來畫一些圖形，是因為我們在模組化和效能上做考慮，儘量在元件級別的 CSS 少使用圖片。