css 畫三角形箭頭
阿新 • • 發佈：2019-01-10
效果：
程式碼：
.left-arrow
{
border-style: solid;
width: 0px;
height: 0px;
border-width: 30px;
border-color: transparent green transparent transparent;
}解析：
（一）border-color 的解釋
我們把上述程式碼的 border-color 改成如下樣式：
看看效果：
所以可得出結論：
border-color 從左到右的四個域著色 對應 上->右->下->左 (順時針)。
四個域中，只需留下一個域的顏色，其他三個域設定成透明，即可形成箭頭。
如：
效果：
（二）border-style的解釋：
boder-style 必需設定成 solid ，意為邊框為實線，因為整個箭頭其實就是邊框來的，如設定需虛線，就會：
（三）width 和 height = 0的解釋
當內容設定為0時（即內容消失），整個箭頭就是邊框。
（四）測試程式碼：
<html> <head> <style> .left-arrow { border-style: double; width: 0px; height: 0px; border-width: 30px; border-color: transparent green transparent transparent; } </style> </head> <body> <p class="left-arrow"></> </body> </html>