css border画图

　　css border属性竟然可以用来画图，今天项目中遇到该问题，借此有机会深入了解了下。

　　css border属性在我的印象当中只是方方正正的东西，无非就是增加边框的宽度，变换边框的颜色，因此一直以为边框不管怎么变换都是一个长方体，这个念头今天终于可以抛弃了。

　　先看下普通边框效果：

　　

.border1{width:50px; height:50px; border:2px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
<div class="border1"></div>

　　我们再将border的值增加到20px看看效果，惊喜出现了，发现竟然绘制出了4个梯形。

    

.border1{width:50px; height:50px; border:20px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
<div class="border1"></div>

　　我们再将div的高度、宽度都设置为0，width:0;height:0;再看看效果。此时绘制出了4个等腰直角三角形。

　　

.border1{width:0px; height:0px; border:20px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
<div class="border1"></div>

　　我们再将左、右、下三个边框变为透明，border-color:#ff3300 transparent transparent transparent;

　　

.border1{width:0px; height:0px; border:20px solid; border-color:#ff3300 transparent transparent transparent;}
<div class="border1"></div>

　　成功绘制出一个三角形。哈哈。。。

　　利用边框绘图的原理就是这样，可以改变边框的宽度绘制不规则的形状。

　　下面是利用边框实现气泡对话框的例子：

<style>
.box{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.box span{width:0;height:0;font-size:0;overflow:hidden;position:absolute;}
.box span.bot{border-width:20px;border-style:solid dashed dashed;border-color:#beceeb transparent transparent; left:80px;bottom:-40px;}
.box span.top{border-width:20px;border-style:solid dashed dashed;border-color:#ffffff transparent transparent; left:80px;bottom:-33px;}
</style>
<div class="box">
        <span class="bot"></span>
        <span class="top"></span>
        css 边框法实现气泡对话框
</div>

　　效果图：

 

下面解决IE6问题：

IE6的空div高度bug： 
IE6下，空div会有莫名的高度，也就是说“height: 0;”不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用：
font-size: 0;
line-height: 0;
overflow: hidden;（来解决空的div会在ie6下有高度）

#test3 {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 transparent transparent;
    border-style: solid;
    border-width: 20px;
}

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

找到一个在IE6下边框透明的文章中找到解决办法，设置余下三条边的border-style为dashed，即可达到透明的效果：

 #test4 {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 transparent transparent;
    border-style: solid dashed  dashed;（这样的话在ie6下就透明了，想知道为啥吗？？？看下面的玄机，哈哈）
    border-width: 20px;
}

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