[CSS] 支援所有主流瀏覽器的「三角」作法

跨瀏覽器相容之「三角形」語法（此語法在 IE6、IE8、Firefox5、Chrome12 中實測無誤）：

<div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-right"></div> <div class="arrow-left"></div> <style type="text/css"> .arrow-up { width:0px; height:0px; border:5px solid; border-color:transparent transparent black transparent;/ border-style:dashed dashed solid dashed; //向上三角形 } .arrow-down { width:0px; height:0px; border:20px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed; //向下三角形 } .arrow-right { width:0px; height:0px; border:60px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid; //向右三角形 } .arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed; //向左三角形 } </style>
範例效果：

向上三角形


向下三角形


向右三角形


向左三角形

參考網站:
http://www.36ria.com/demo/triangle/
http://cssshare.com/1/chun-csssan-jiao-xiao-guo-dai-ma



(編輯記錄)

MEPOERs said: