css三角形实现的几种方法的区别

演变：

.triangle{
height: 30px; width: 30px;
display: inline-block;
border: 30px solid; border-color: #ff0000 #00ff00 #0000ff #ffff00;
}

<span class="triangle"></span>

so，设置width，height为0，边框透明时可以实现三角形效果。

简单说来，css实现方法有三种，

先贴代码看效果：

.triangle1,.triangle2,.triangle3{ width: 0; height: 0;/*overflow:hidden;解决ie6左右向溢出问题*/ display: inline-block; border-color: #ff3300 transparent transparent transparent;}
.triangle1{
border-width: 10px; border-style: solid;
}
.triangle2{
border-width:10px; border-style: solid dashed dashed;
}
.triangle3{
border-width: 10px 10px 0; border-style: solid dashed;
}
.triangle2:hover{ border-style: dashed dashed solid dashed; }
.triangle3:hover{ border-width: 0 10px 10px 10px;}
.triangle1:hover,.triangle2:hover,.triangle3:hover{ border-color:transparent transparent #ff3300 transparent; }

.triangle11,.triangle22,.triangle33{ width: 0; height: 0; /*overflow:hidden;解决ie6左右向溢出问题*/ display: inline-block; border-color:transparent #ff3300 transparent transparent; }
.triangle11{
border-width: 10px; border-style: solid;
}
.triangle22{
border-width:10px; border-style: dashed solid dashed dashed;
}
.triangle33{
border-width: 10px 10px 10px 0; border-style: dashed solid;
}
.triangle22:hover{ border-style: dashed dashed dashed solid; }
.triangle33:hover{ border-width: 10px 0 10px 10px;}
.triangle11:hover,.triangle22:hover,.triangle33:hover{ border-color:transparent transparent transparent #ff3300; }

<div class="fz">
<span class="triangle1 trans"></span>
<span class="triangle2 trans"></span>
<span class="triangle3 trans"></span>
<span class="triangle11 trans"></span>
<span class="triangle22 trans"></span>
<span class="triangle33 trans"></span>
</div>

效果：


问题：①

ie6出现黑色部分原因是ie6浏览器不支持transparent透明属性，设置对应的透明边框的border-style属性为dotted或是dashed。（即“.triangle1”演变为“.triangle2”的下效果）

②

如果需要添加hover三角形倒转效果，由于“.triangle2”位置错误，所以应使用“.triangle3”。

③

在ie6左右向三角形出现溢出。需添加 “overflow: hidden;” 属性解决。

修改后ie6效果：


原理：





综上所述：

左右朝向ie6出现拉伸，所以注意添加“overflow:hidden” 属性。

1方法不可取，因为ie6不兼容，改solid为dashed或者dotted即变为2；

2方法在倒转的时候位置错位；

3方法可取。