轉載自知乎瀧阱
三角形和箭頭這兩個圖標在網頁中經常會用到，例如：下拉選擇框、排序、返回到上一頁、導航條，分頁都會用到三角形或者箭頭，當然是用圖片的方式的確可以實現這一樣式，但是是用圖片如果調整顏色那就比較困難了，除非再做一張圖片，這樣的做不僅浪費開發成本並且會降低網頁性能。我們可以采用 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 少使用圖片。