利用css中的border生成三角,兼容包括IE6的主流浏览器

2013-09-08 来源: leejersey 发布在  http://www.cnblogs.com/leejersey/p/3308120.html

1、生成四个不同颜色方向的梯形

#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }

2、只显示一个方向的梯形

#ladder-top{ width:20px; height:20px; border:10px solid; border-color:#ff3300 transparent transparent transparent; border-style:solid dashed dashed dashed; }

#ladder-bottom{ width:20px; height:20px; border:10px solid; border-color:transparent transparent #339966 transparent; border-style:dashed dashed solid dashed;     }

3、设置宽度和高度为0,使梯形转换为三角形

#triangle-top{ width:0px; height:0px; border:10px solid; border-color:#ff3300 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }

#triangle-bottom{ width:0px; height:0px; border:10px solid; border-color:transparent transparent #339966 transparent;/ border-style:dashed dashed solid dashed;     }

4、实战:纯css实现文字提示框

;;; left:50%; margin-left:-6px; } .yitip .pointyTip{ border-top-color:#f9f2ba; } .yitip .pointyTipShadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }

转:http://www.36ria.com/demo/triangle/#

相关文章