初始化乙個容器：
style
="display
: flex;
align-items
: center;
justify-content
: center;
">
style
="width
: 0;
height
: 0;
border
: 50px solid;
border-color
: red green blue black;
">
span
>
div>
通過隱藏其他border的顏色，就可以達到只顯示某一方向的箭頭的效果：
style
="display
: flex;
align-items
: center;
justify-content
: center;
">
style
="width
: 0;
height
: 0;
border
: 50px solid;
border-color
: transparent transparent transparent black;
">
span
>
div>
還可以通過修改其他方向的border，達到變形的效果：
style
="display
: flex;
align-items
: center;
justify-content
: center;
">
style
="width
: 0;
height
: 0;
border
: 50px solid;
border-top
: 20px solid;
border-bottom
: 20px solid;
border-color
: transparent transparent transparent black;
">
span
>
div>
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
純CSS繪製箭頭
這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...
css畫橫線箭頭 用CSS繪製三角形箭頭
用css繪製三角形箭頭。使用純css，你只需要很少的 就可以創作出各種瀏覽器都相容的三角形箭頭！css create an arrow that points up div.arrow up width 0 height 0 border left 5px solid transparent lef...