Div border do the triangle principle

. 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 is a width and color, when the width of the div is relatively large, such as the above code on each side 100 pixels, the color is not the same, the browser how to render color? It has been tested that when the border of the larger width intersect:

1, only the adjacent edges will intersect, the edge is not possible to intersect

2, the intersection area (obviously the rectangle) divides into two triangles by the diagonal, two triangles renders the color of two sides respectively, the color does not overlap the situation

3, adjust the width of four sides, plus the width of the middle area, with different colors and transparent, a variety of simple polygons have been easy

Div border do the triangle principle