css border制作小三角形状及应用（兼容IE6）

桃扇骨 2022-08-07 09:53 159阅读 0赞

#### css盒模型 ####

![css border制作小三角形状及应用（兼容IE6）][css border_IE6]

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

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

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

#### 示例1 ####

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 1]

#test1 {
        height:20px;
        width:20px;
        border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
        border-style:solid;
        border-width:20px;
    }

#### 示例2 ####

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 2]

#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种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么

#### 示例3 ####

只保留上面的橙色, 看看

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 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下不支持透明啊~~~, 会出现下图的样子

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 4]

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

#### 示例4 ####

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 5]

#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下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.

#### 示例5 ####

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 6]

#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 ;
    }

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 7]

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

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 8]

另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现, 见[示例][Link 1].

### 应用之圆角生成 ###

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

\- 上梯形(无上边框,下左右3px宽度, 左右颜色去掉)+矩形+下梯形

![css border制作小三角形状及应用（兼容IE6）][css border_IE6 9]

自适应圆角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在IE6中依然显示为dispaly:block,而IE7中top 和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3 中插入文字xxx后只能扩展到文字宽度,不能与bd对齐.

\- 见 [自适应圆角1][1]

自适应圆角2

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

\- 见 [自适应圆角2][1]

### 其他小问题 ###

\- 透明:

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);

### 扩展学习（[酷剑][Link 2]原创） ###

通过上面给力的文章，我们了解到使用css制作兼容的小三角。  
但是日常的小三角哪有这么简单呢？例如我们的一个下拉菜单，里面有一个小三角行的，小三角行有蓝色边框，底色为白色。这就需要运用两个小三角来制作定位了。  
![导航小三角][460]

通常设置上面的ul相对于上面的li为position:absolute;

这两个的小三角行则是通过伪元素来制作，同时通过一些标签来兼容IE6和IE7的。如：

.header .menu ul:before,.header .menu ul .before {
    display:inline-block;
    width:0;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
    vertical-align:middle;
    border-bottom:7px solid #0088CC;
    border-top:0 none;
    border-left:7px dashed transparent;
    border-right:7px dashed transparent;
    _color:#FF3FFF;
    _filter:chroma(color=#FF3FFF);
    content:"";
    left:37px;
    position:absolute;
    top:-7px
    }
    .header .menu ul:after,.header .menu ul .after {
    display:inline-block;
    width:0;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
    vertical-align:middle;
    border-bottom:6px solid #ffffff;
    border-top:0 none;
    border-left:6px dashed transparent;
    border-right:6px dashed transparent;
    _color:#FF3FFF;
    _filter:chroma(color=#FF3FFF);
    content:"";
    left:38px;
    position:absolute;
    top:-6px
    }

同时我还发现了一个bug，那就是在IE6下面当隐藏UL，然后鼠标经过LI时显示时小三角不显示了，不知道是什么原因，我通过给UL直接设置为visibility:hidden而不是display:none，如果你也遇到同样的情况，希望这个发现能够对你有用，如果你无视IE6、IE7，那么就直接用伪元素吧。什么hack都不用。

### 参考资料 ###

1.  [CSS小三角原理][CSS]
2.  [CSS气泡效果][CSS 1]
3.  [IE6下边框透明原理解析][IE6]
4.  [CSS3实现的机器猫图形][CSS3]

[css border_IE6]: http://img.caibaojian.com/uploads/2013/05/111207vq8.png
[css border_IE6 1]: http://img.caibaojian.com/uploads/2013/05/111207WmQ.gif
[css border_IE6 2]: http://img.caibaojian.com/uploads/2013/05/111208amM.gif
[css border_IE6 3]: http://img.caibaojian.com/uploads/2013/05/1112093zX.gif
[css border_IE6 4]: http://img.caibaojian.com/uploads/2013/05/111210mO8.gif
[css border_IE6 5]: http://img.caibaojian.com/uploads/2013/05/111211ffD.gif
[css border_IE6 6]: http://img.caibaojian.com/uploads/2013/05/111211jUf.gif
[css border_IE6 7]: http://img.caibaojian.com/uploads/2013/05/111212msK.gif
[css border_IE6 8]: http://img.caibaojian.com/uploads/2013/05/111213qWm.gif
[Link 1]: http://liz.appspot.com/static/border/my.html#slide6
[css border_IE6 9]: http://img.caibaojian.com/uploads/2013/05/111214v22.gif
[1]: http://liz.appspot.com/static/border/my.html#slide7
[Link 2]: http://caibaojian.com/
[460]: http://t2.qpic.cn/mblogpic/016524dc05fc428054be/460
[CSS]: http://www.zhangxinxu.com/wordpress/?p=794
[CSS 1]: http://www.zhangxinxu.com/wordpress/?p=651
[IE6]: http://blog.silentash.com/2009/12/ie6-border-transparent/
[CSS3]: http://koyoz.com/blog/?action=show&id=282
[css border_IE6 10]: http://caibaojian.com/css-border-triangle.html