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

简单说来,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; }

html代码:

<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效果:技术分享

原理:

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。