(编辑:jimmy 日期: 2024/11/1 浏览:2)
一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图
#test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.
#test2 { height:0; width:0; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么
只保留上面的橙色, 看看
#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px; }
可是, IE6下不支持透明啊~~~, 会出现下图的样子
找到一个在IE6下边框透明的文章中找到解决办法, 如下例
IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~ 具体原因可以见参考资料3
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px; }
当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.
上面我们画的小三角的斜边都是依靠原来盒子的边, 还有另外一种形式的小三角, 就是斜边在盒子的对角线上
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ; }
保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.
像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了.
另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现, 见示例.
border-color: pink; filter: chroma(color=pink);