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

来源：互联网发布：中国程序员数量不够编辑：程序博客网时间：2024/04/20 06:13

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实现文字提示框

这是一个链接

这个示例由明河制作

代码

.yitip-wrapper{ padding-top:20px; } .yitip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; background-color:white; font-size:12px; line-height:1; text-decoration:none; text-align:center; text-shadow:0 0 1px white; white-space:nowrap; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#f9f2ba; border:1px solid #e9d315; color:#5b5316; } .yitip .pointyTipShadow,.yitip .pointyTip{ position:absolute; border:6px solid; border-color:#e9d315 transparent transparent transparent; border-style:solid dashed dashed dashed; bottom:-12px; width:0;height:0; left:50%; margin-left:-6px; } .yitip .pointyTip{ border-top-color:#f9f2ba; } .yitip .pointyTipShadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }

0 0