CSS特效你知道多少？分享用css画三角形的案例

效果图

    　

如何用css画三角形?

　　　　　　1).利用css控制border的边框属性, 画出四个小三角形

　　　　　　　　html代码

　　　　　　　　

　　　　　　　　css代码

　　　　　　　　

　　　　　　　　效果:

　　　　　　　　

　　　　　　　　从css很容易看出来, div的边框 border-top, border-right, border-bottom, border-left (上右下左)这三个边框, 都是梯形.

　　　　　　　　那么, 如果梯形的上底无限接近0的时候, 是不是就越来越接近三角形?

　　　　　　　　如下:

　　　　　　　　当width = 200px, height = 200px 的时候,(width为中间白色矩形的宽, height为它的高)

　　　　　　　　

　　　　　　　　当width = 150px, height = 150px 的时候,

　　　　　　　　

　　　　　　　　当width = 100px, height = 100px 的时候,

　　　　　　　　

　　　　　　　　当width = 50px, height = 50px 的时候,

　　　　　　　　

　　　　　　　　当width = 25px, height = 25px 的时候,

　　　　　　　　

　　　　　　　　当width = 5px, height = 5px 的时候,

　　　　　　　　

　　　　　　　　最后, 当width = 0px, height = 0px 的时候,

　　　　　　　　

 

　　　　　　2). 将不需要的三角形透明化

　　　　　　　　border-color有一取值: transparent (透明), 所以只需要把其他的三角形的border-color设置成 "transparent"就可以了.

　　　　　　　　html代码

　　　　　　　　

　　　　　　　　css代码

　　　　　　　　

　　　　　　　　效果:

　　　　　　　　

　　　　　　　

 

　　　　　　　　注意:Internet Explorer 6（以及更早的版本）不支持属性值 "transparent"。

　　　　　　　  在IE6中的效果:

　　　　　　　

　　　　　　　 将css改成:　　　　　　　　　　　　　　　

　　　　　　　　border-color:transparent transparent transparent blue;
border-width:50px;
border-style:dashed dashed dashed solid;

　　　　　　　　在IE6中的效果:

　　　　　　　　

　　　　　　　　

　　　　　　　　听了hinong兄弟的话, 加了 "overflow:hidden;", 在IE6显示就正常了.

　　　　　　　　效果:

　　　　　　　　

　　　　　　　　演示代码:

 

本文来源 我爱IT技术网 http://www.52ij.com/jishu/5486.html 转载请保留链接。