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如下
  1. .arrow-up { width:0pxheight:0pxborder:10px solidborder-color:transparent transparent black transparentborder-style:dashed dashed solid dashed; }    
  2. .arrow-down { width:0pxheight:0pxborder:10px solidborder-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed;  }    
  3. .arrow-right { width:0pxheight:0pxborder:10px solidborder-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid;  }    
  4. .arrow-left { width:0pxheight:0pxborder:10px solidborder-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed;  }  

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

最後效果如下。
triangle

留言