div border做三角形原理

标签：

.t0{  
    margin:30px;  
    height:200px;  
    width:200px;  
    border-top:solid 100px red;  
    border-left:solid 100px green;  
    border-right:solid 100px orange;  
    border-bottom:solid 100px blue;
}

div的border是有宽度和颜色的，当div的宽度比较大的时候，比如上面代码每个边100像素，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：

1、只有相邻边才会相交，对边是不可能相交的

2、相交区域(显然是矩形)按对角线划分成两个三角形，两个三角形分别渲染成两个边的颜色，颜色不会出现重叠的情况

3、调整四个边的宽度，加上中间区域的宽度，配以不同颜色和透明，各种简单多边形已经不在话下了

div border做三角形原理

标签：

原文地址：http://my.oschina.net/lantianbaiyun/blog/487441