css实现三角箭头（兼容IE6)

纯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>