純css實現三角箭頭有幾種方式，常規的方式用css3的rotate把元素旋轉45度角，無法兼容ie的主要原因是ie不支持邊框透明， 第二種方法，使用chroma濾鏡透明，經嘗試在ie下會出現activex的安全提示，基本不可行，第三種是用boder-style:dashed，這種方法效果比較完美，美中不足的是目測向下箭頭比上簡頭差了一個象素，下簡頭需調整border-width減掉一個像素

?

效果：

代碼：

<style> .arrow{border-style:solid;border-width:10px; border-color:transparent;/*上邊框設置想要的顏色*/height:0; width:0; font-size:0; } .up{ border-bottom-color:red; _border-style:dashed dashed solid dashed; } .down{ border-top-color:red; _border-style: solid dashed dashed dashed ; } </style><div style="position:relative"> <span class="arrow up" style="top:0px;position:absolute;"></span> <span class="arrow down" style="top:50px;position:absolute;"></span> </div>

?

轉載于:https://www.cnblogs.com/windyfancy/p/5254061.html

總結

以上是生活随笔為你收集整理的css实现三角箭头（兼容IE6)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。