原理

css 盒模型

一个盒子包括：margin+border+padding+content

上下左右边框交界处出呈现平滑的斜线。 利用这个特点， 通过设置不同的上下左右边框宽度或者颜色可以得到小三角， 小梯形等。

调整宽度大小可以调节三角形形状。

示例 1

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

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

示例 2

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

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

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

示例 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;
}

可是，IE 6 下不支持透明啊~，会出现下图的样子

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

示例 4

IE 6 下， 设置余下三条边的 border-style 为 dashed，即可达到透明的效果~ 具体原因可以见参考资料 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;
}

当然，在 IE 6 下，不设置透明， 将其颜色设置为背景色，使其看不出来也是可以的。

示例 5

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

#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 绝对定位来实现。

应用之圆角生成

应该说是近似圆角，其实由一个高度非常小的梯形展示出来

上梯形（无上边框，下左右 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。

不过 IE 6/7 出现 bug：rc 在 IE 6 中依然显示为 dispaly: block，而 IE 7 中 top 和 bottom 缩成一坨，不肯扩展开来，而在 rc1/rc2/rc3 中插入文字 xxx 后只能扩展到文字宽度，不能与 bd 对齐。

自适应圆角 2：

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

其他小问题

• 透明:

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

• IE 6 的奇偶 bug：

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

• IE 6 的空 div 高度 bug：

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

• filter: chroma 滤镜

该属性属性可以设置一个对象中指定的颜色为透明色，如：

border-color: pink;
filter: chroma(color=pink);

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：https://fed.taobao.org/blog/2010/08/05/css-border-hack/

作者：admin