使用 border 畫三角形和箭頭
一條邊框在和模型中其實並不是一條線，如果我們將邊框設定得足夠大，並且設定不同的顏色，我們就很容易看到邊框的本質，從下圖很容易可以看出其事 border 在乙個正方形 dom 上其實是乙個梯形：
css-border.png
畫三角形
利用這一原理我們可以將 dom 的高和寬設定為 0 畫素，通過設定邊框的顏色透明來畫出不同的三角形，當然也可以來設定 border 的寬度來畫出不同角度的三角形：
css-border-********.png.******** { 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 度的旋轉，這樣就可以得到不同型別的箭頭了：
css-transform-arrow.png.arrow { width: 50px; height: 50px; border-top: 5px solid #ccc; border-left: 5px solid #ccc; transform: rotate(45deg)
畫三角形
如果要畫三角形的話，我們需要在這個箭頭上增加一條邊長線就可以了。
優勢和缺點[優勢]顏色可控；
[缺點]不能畫出實心的三角形；
[缺點]高度和寬度很難控制，需要一定的計算；
[缺點]不相容低版本 ie
其它方式
當然還有其它的方式來畫三角形和箭頭：canvas
svgcss 點陣
總結這兩種畫法都存在有有缺點，應該根據具體的應用場景來確定使用哪種方式。當然我們之所以採用 css 來畫一些圖形，是因為我們在模組化和效能上做考慮，盡量在元件級別的 css 少使用。
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
css畫橫線箭頭 如何用純CSS實現的箭頭的效果？
如何用純css實現的箭頭的效果？要點 用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 de...
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...