這幾天研究別人的**，發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。
繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。
width: 0;
height: 0;
border: 50px solid;
border-color: red yellow green blue;
}class="box">div>
效果如下：
可以看到這個矩形是由四個三角形組成的，繪製三角形，只要讓其餘三個三角形顏色透明即可。利用「transparent」屬性就可以做到。
.box
那麼如果利用三角形來繪製箭頭呢？我們可以再繪製乙個相同大小，相同方向的，顏色與背景色相同的三角形，覆蓋在上乙個三角形上面，通過產生一定位移而形成箭頭，像這樣：
以上，為了便於看出差別，中的三角形加了邊框，如果沒有邊框，不就是乙個完完整整的向下的箭頭麼？
通過給容器加：before和：after屬性，我們可以為容器製作出兩個三角形，進而重疊成乙個箭頭，如下：
.container
/*黑色三角形 */
.container:before
/*背景色三角形*/
.container:after
"container"
>天下第一
怎麼樣？有沒有get起來？
CSS 繪製箭頭
初始化乙個容器 style display flex align items center justify content center style width 0 height 0 border 50px solid border color red green blue black span d...
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
純css實現箭頭
很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...