一、箭頭產生的原理
#demo12 { border: 100px solid; border-color:green blue orange red; width:100px; height:100px; } <div id="demo12"></div>
第一步：設置一個div，然后給他設置樣式：邊框100px，上右下左顏色分別為綠、藍、橘、紅。然后設置div的高度和長度均為100px。
效果圖如下：
第二步：我們可以看到中間一個正方形，就是我們設置的長和框：100px*100px。假如把width和height都設置成0的話，會有什么樣的情景呢？
content拿掉后，其實就是變成一個點了，然后就變成下圖了：
第三步：三角形是不是有了？而且還有四個，這時我們只需要取其中想要的任意一個方向的三角形即可。
比如我們要取綠色的三角形。看好了，一句話就出來了：
將上面的代碼修改一行代碼：
border-color:green transparent transparent transparent;
同理，如果你要取藍色的、橘色的、紅色的，改變第一個顏色值即可。
除了獲取上面三角形以外，我們還可以獲取上面每個三角形的一半，也就是一個小的三角形（left或right）：
這時，我們再加一行代碼即可獲取：
#demo12 { border: 100px solid; border-color:green transparent transparent transparent; border-left:transparent; width:0px; height:0px; }
加上border-left:transparent;后，我們可以獲取right的部分，結果如下：
同理，要獲取left部分，可以設置border-right:transparent;
二 、箭頭在實際應用中的使用和實現
㈠一個梯形
當元素寬、高和邊框的寬相近（等）時，改變某一邊的顏色可以看到一個梯形:
<div id="demo11"></div> <style> #demo2 { border: 10px solid #000; border-left-color: #f00; width: 10px; height: 10px; } </style>
效果圖：
㈡三角形
當元素寬、高為零，且其他邊為透明顏色時，可以形一個三角形:
<div id="demo12"></div> <style> #demo12 { border: 10px solid #000; border-left-color: #f00; width: 0; height: 0; } </style>
效果圖：
㈢任意角度三角形
改變各個邊的寬度，即通過調整“邊框”厚度可以配置出任意角度:
<div id="demo14"></div> <style> #demo14 { border: 10px solid transparent; border-left: 20px solid #f00; width: 0; height: 0px; } </style>
效果圖：
㈣三角形跟矩形組合成提示框
<div id="demo"></div> <style> #demo { width: 100px; height: 100px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } #demo:after { border-width: 9px; border-left-color: #ccc; top: 15px; } #demo:before { border-width: 14px; border-left-color: #333; top: 10px; } </style>
效果圖：
㈤三角線分割的 Tab 頁
<ul id="demo17"> <li> Tab1</li> <li> Tab2</li> <li> Tab3</li> </ul> <style> #demo17{ font-size: 10px; height: 24px; } #demo17 li { float: left; position: relative; list-style: none; margin: 0 20px 12px -19px; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; padding-left: 12px; } #demo17 li:after, #demo17 li:before { border: 10px solid transparent; border-left: 10px solid #fff; width: 0; height: 0; position: absolute; top: 0; right: -18px; content: ' ' } #demo17 li:before { border-left-color: #ddd; right: -19px; } </style>
效果圖：
㈥一個向右的箭頭
我們將top、right、bottom均設置為透明色即可獲得。
#demo12 { border: 10px solid; border-color:transparent transparent transparent orange; width:0px; height:0px; }
效果圖：
㈦我們從上面的四個三角形中，把bottom的三角形去掉即可，也就是把bottom的三角形設置為透明色：
#demo13 { border: 50px solid; border-color:orange orange transparent orange; width:0px; height:0px; }
效果圖：
㈧兩個向右的三角形疊加而成
設置2個div，其中一個相對定位，另外一個絕對定位，這樣就可以控制兩個div的位置了。
然后獲取2個div的右向箭頭即可。talk is cheap，show me the code！
.demo14{ border: 50px solid; border-color:transparent transparent transparent orange; width:0px; height:0px; } .demo12 { position:relative; float:left; } .demo13 { position:absoulte; margin-top:-52px; } <div class="demo demo12"> <div class="demo demo13"></div> </div>
效果圖：
參考：https://www.cnblogs.com/skyflask/p/8877713.html