css 畫三角形

用純css畫三角形。

首先準備html，用一個div就可以製作了。
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>

css如下

view plaincopy to clipboardprint?

1. .arrow-up { width:0px; height:0px; border:10px solid; border-color:transparent transparent black transparent; border-style:dashed dashed solid dashed; }    
2. .arrow-down { width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed;  }    
3. .arrow-right { width:0px; height:0px; border:10px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid;  }    
4. .arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed;  }  

可以調整一下邊框的顏色跟寬度，不要只有一面不透明，會有不一樣的效果喔。

最後效果如下。