CSS border实现三角形

一、原理

 

CSS盒模型

一个盒子包括：margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等。 调整宽度大小可以调节三角形形状。

示例1：
一般情况下，我们设置盒子的宽高度及上下左右边框，会呈现如下图：

CSS语言:  高亮代码由发芽网提供

1  #test1 {
2  height:  20px;
3  width:  20px;
4  border-color:  #FF9600  #3366ff  #12ad2a  #f0eb7a;
5  border-style:  solid;
6  border-width:  20px;
7 }

示例2：
在上面基础上，我们把宽高度都设为0时，会呈现上述的边界斜线：

CSS语言:  高亮代码由发芽网提供

01  #test2 {
02  height:  0;
03  width:  0;
04  overflow:  hidden;  /* 这里设置overflow, font-size, line-height */
05  font-size:  0;      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
06  line-height:  0;   /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
07  border-color:  #FF9600  #3366ff  #12ad2a  #f0eb7a;
08  border-style:  solid;
09  border-width:  20px;
10 }

这时，其实我们已经看到有上下左右四个三角形了。如果4种颜色只保留一种颜色，余下3种颜色设置为透明（或者设置为和背景色相同的颜色），那不就出现一个小三角了吗？

示例3：
只保留上面的红色，如下图：

CSS语言:  高亮代码由发芽网提供

01  #test3 {
02  height:  0;
03  width:  0;
04  overflow:  hidden;
05  font-size:  0;
06  line-height:  0;
07  border-color:  #FF9600  transparent  transparent  transparent;
08  border-style:  solid;
09  border-width:  20px;
10 }

可是，IE6下不支持透明啊，会出现下图的样子：

找到一个在IE6下边框透明的文章中找到解决办法，如下例。

示例4：
IE6下，设置余下三条边的border-style为dashed，即可达到透明的效果，具体原因可以见参考资料3：

CSS语言:  高亮代码由发芽网提供

01  #test4 {
02  height:  0;
03  width:  0;
04  overflow:  hidden;
05  font-size:  0;
06  line-height:  0;
07  border-color:  #FF9600  transparent  transparent  transparent;
08  border-style:  solid  dashed  dashed  dashed;
09  border-width:  20px;
10 }

示例5：
上面我们画的小三角的斜边都是依靠原来盒子的边，还有另外一种形式的小三角，就是斜边在盒子的对角线上：

CSS语言:  高亮代码由发芽网提供

01  #test5 {
02  height:  0;
03  width:  0;
04  overflow:  hidden;
05  font-size:  0;
06  line-height:  0;
07  border-color:  #FF9600  #3366ff  transparent  transparent;
08  border-style:  solid  solid  dashed  dashed;
09  border-width:  40px  40px  0  0 ;
10 }

保留其中一种颜色，就可以得到斜边在对角线上的三角形了。多个这样的三角形，通过设置边框大小、颜色，拼凑起来可以形成任意形状的三角形：

像这种不规则的三角形，延伸一下，放在气泡框上，就可以省去拼背景图片的麻烦了：

另外，关于气泡框，可以使用棱形字符(◆)来实现，设置其font-size，颜色和背景色一致，定位可以使用margin负值和absolute绝对定位来实现。

二、应用之圆角生成

应该说是近似圆角，其实由一个高度非常小的梯形展示出来。上梯形（无上边框，下左右3px宽度，左右颜色去掉）＋矩形＋下梯形。

自适应圆角1

整个rc设置为“float: left”或“display: inline-block”分为top、bd、bottom，top中又有两个层rc1和rc2，rc1只设置border-top，高度为0，并设置左右margin呈短小的一横线，rc2只设置左右border并且左右margin小于rc1，height为1px，中间bd设置左右border，不设置左右margin。 – 不过IE6&7出现bug：rc在IE6中依然显示为“dispaly: block”，而IE7中top和 bottom缩成一坨，不肯扩展开来，而在rc1/rc2/rc3中插入文字xxx后只能扩展到文字宽度，不能与bd对齐。

自适应圆角2

自Google系产品的1px圆角按钮，共三层div，最外层div1正常设置边框宽度1px，呈现出上下边框线，中间div2只设置左右边框，且把左右margin设置成负值，呈现出圆角处的4个圆点，内层div3同样只设置左右边框，同时margin上下空出div2的高度，margin左右也设置与div2相同的负值。

三、其他小问题

透明

IE6浏览器不支持transparent透明属性，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，原因是在IE6下，点线与虚线均以边框宽度为基准，点线长度必须是其宽度的3倍以上(height>=border-width*3)，虚线宽长度必须是其宽度的5倍以上(height>=border-width*5)，否则点线和虚线都不会出现。

IE6的奇偶bug

如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值。

IE6的空div高度bug

IE6下，空div会有莫名的高度，也就是说“height: 0;”不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用“font-size: 0;”＋“overflow: hidden;”修复此问题。

filter: chroma滤镜

该属性属性可以设置一个对象中指定的颜色为透明色，如：border-color: pink;filter: chroma(color=pink);

那您可能会喜欢:

• Best Google+ WordPress Theme
• Premium WordPress Jobs Theme | WP Daily Blog
• FaultPress Premium WordPress Template
• 一些当前和即将开放的云平台(Python主机)
• 邮件写作指南：6步教你写出漂亮的邮件

延伸阅读

---

▶ Walkthrough007