實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。
一、繪製三角
容器：樣式：
.container{
width: 0;
height: 0;
border: 50px solid;
border-color: red yellow green blue;
效果如圖：
三角利用border繪製了四個三角組成的矩形，現在要繪製三角形，只需要讓其他任意三個三角形變為透明即可。
修改**：
border-color: red transparent transparent transparent;
單個三角
二、繪製箭頭
利用三角繪製箭頭，只需要再繪製乙個和此三角大小相同，方向相同的三角，顏色和背景顏色一樣，覆蓋在此三角上面，通過少量的位移形成箭頭。
像這樣.container{
width: 0;
height: 0;
border: 50px solid;
border-color: red transparent transparent transparent;
position: relative;
.container::after{
content: '';
position: absolute;
top: -55px;
left: -50px;
border: 50px solid;
border-color: white transparent transparent transparent;
單個箭頭
這是乙個基本的完成箭頭，只能滿足最簡單的場景，現在對它做一點基本的擴充套件。
三、擴充套件
目標現在想要做乙個箭頭疊加的效果，像這樣的下拉圖示，剛好可以學以致用。
html設定容器：
外層box：
.box{
width:160px;
height: 20px;
border: 1px solid #dddddd;
position: relative;
內層箭頭container居中：
.arrow-container{
width: 30px;
position: absolute;
left: 50%;
margin-left: -15px;
兩個箭頭疊加：
.arrow-up{
position: relative;
z-index: 100;
.arrow-up::before{
content: '';
position: absolute;
border-left: 12px solid;
border-top:10px solid;
border-right: 12px solid;
border-bottom: 10px solid;
border-color: #2dacfd transparent transparent transparent;
.arrow-up::after{
content: '';
position: absolute;
border-left: 12px solid;
border-top:10px solid;
border-right: 12px solid;
border-bottom: 10px solid;
border-color: white transparent transparent transparent;
left: 0;
top: -2px;
.arrow-down{
position: relative;
top:8px;
.arrow-down::before{
content: '';
position: absolute;
border-left: 12px solid;
border-top:10px solid;
border-right: 12px solid;
border-bottom: 10px solid;
border-color: #2dacfd transparent transparent transparent;
.arrow-down::after{
content: '';
position: absolute;
border-left: 12px solid;
border-top:10px solid;
border-right: 12px solid;
border-bottom: 10px solid;
border-color: white transparent transparent transparent;
left: 0;
top: -2px;
初成品注意細節：
以前設定border時border: 10px solid;是個正方形，箭頭開啟的角度是90度，看起來很怪異，為了更好看一定，border分開設定，左右border設定大一點，可以保證開啟的角度更大更平緩。
箭頭的疊加都是每個箭頭有2個三角疊加形成的效果，然後兩個箭頭通過定位來改變位置，當兩個箭頭靠的比較近時，下面箭頭的透明三角色塊會擋住上面箭頭的底部，為了解決這個問題，需要給箭頭設定z-index使其顯示在上層。
綜合修改之後：
修改後四、擴充套件實踐
下拉前下拉後
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...
css畫橫線箭頭 用CSS繪製三角形箭頭
用css繪製三角形箭頭。使用純css，你只需要很少的 就可以創作出各種瀏覽器都相容的三角形箭頭！css create an arrow that points up div.arrow up width 0 height 0 border left 5px solid transparent lef...
css畫橫線箭頭 用CSS繪製三角形箭頭
用css繪製三角形箭頭。使用純css，你只需要很少的 就可以創作出各種瀏覽器都相容的三角形箭頭！css create an arrow that points up div.arrow up width 0 height 0 border left 5px solid transparent lef...