Border attribute Refinement

Previously only know that the border attribute is the box model of the border properties, has not been clear that each side of the border is a rectangular stitching overlap, or trapezoidal seamless stitching.

Border trapezoid

In order to see which way the border is stitched, set a different color background for the border, the code is as follows:

#content {    width: 100px;     height: 100px;     background: #FFC;     border-top: 80px solid #0F0;     border-right: 80px solid #09C;     border-bottom: 80px solid #9F9;     border-left: 80px solid #FC3;}

The above CSS control ID attribute is the property of the content div block, which shows the following effects:

From the above effect is obviously, each side of the border is trapezoidal seamless stitching, rather than rectangular stitching.

Then we can set the other three border color to transparent, so you can get a trapezoid!

#content {    width: 200px;     height: 200px;     border-top: 80px solid #0F0;     border-right: 80px solid Transparent;     border-bottom: 80px solid Transparent;     border-left: 80px solid transparent;}

The display results are as follows:

That's a question, can you achieve a trapezoid that shows only one border by not defining the other three borders?

#content {    width: 200px;     height: 200px;     border-top: 80px solid #0F0;}

Like the above code, we expect the top frame trapezoid in the display box model, but the actual display effect is as follows:

is a rectangle! And the width of the rectangle is 200px, that is, the breadth of the content we define, strange! We don't believe it, so we'll try it for a different browser, but ff,ie,chrome. We can think of such an explanation, if the border is not defined, then this border is represented as a rectangle, if the border is defined, then it behaves as a trapezoid . This will also explain why the above example has a rectangle. Since the left and right borders are not defined, the entire rectangle that belongs to the left and right border areas disappears, leaving a rectangle on the left side of the frame naturally!

Border Triangle

Since it is possible to use border to achieve the trapezoid, can realize the triangle it. Trapezoid will degenerate into a triangle when the top edge becomes 0, I think you have the answer, if you set the content height and width are 0 o'clock, we can get four triangles:

#content {    width: 0px;     height: 0px;     border-top: 80px solid #0F0;     border-right: 80px solid #09C;     border-bottom: 80px solid #9F9;     border-left: 80px solid #FC3;}

We can of course also implement one or 2 or 3 triangles for transparent by setting the background of the other side's border.

#content {    width: 0px;     height: 0px;     border-top: 80px solid #0F0;     border-right: 80px solid #09C;     border-bottom: 80px solid Transparent;     border-left: 80px solid transparent;}

Of course, if you do not define the border of some edges, the undefined border will appear as rectangles.

#content {    width: 0px;     height: 0px;     border-top: 80px solid #0F0;     border-right: 80px solid #09C;     border-left: 80px solid #FC3;}
/* If no border-bottom is defined, the entire rectangle of the bottom border will disappear

If you do not define both the left and right borders, or the upper and lower bounds, nothing is displayed. Of course you can not define one side, while hiding, there will be many kinds of graphics.

More, can be used in the table to draw a slash, multiple border overlay, and before,after pseudo-elements of the combination of a lot of magical! The key is to understand the specific manifestations of border.

Border attribute Refinement