CSS border use small shares)

ArticleDirectory

• Principle
• Application rounded corner generation
• Other minor issues
• References

CSS border uses the small sharing principle CSS Box Model

A box includes: margin + border + padding + content

-A smooth diagonal line is displayed at the border between the upper and lower sides of the border. With this feature, you can get a small triangle and a small trapezoid by setting different width or color of the upper and lower sides of the border.

-Adjust the width to adjust the triangle shape.

 

Example 1

In general, we set the width and height of the box and the upper and lower sides of the border, as shown in

 
# Test1 {Height: 20px; width: 20px; border-color: # ff9600 # 3366ff # 12ad2a # f0eb7a; border-style: solid; border-width: 20px ;}
 

 

Example 2

Based on the above, when we set the width and height to 0, the above boundary diagonal lines will be displayed.

# Test2 {Height: 0; width: 0; overflow: hidden;/* overflow, font-size, line-height */font-size: 0;/* is set here because, although the width and height are 0, in IE6, the default */line-Height: 0;/* font size and row height are displayed, as a result, the box is rendered with an extended long rectangle */border-color: # ff9600 # 3366ff # 12ad2a # f0eb7a; border-style: solid; border-width: 20px ;}
 

At this time, we have seen four triangles on the top, down, and down .. if we keep only one color for the four colors and set the remaining three colors to transparent (or the same color as the background color), isn't there a small triangle?

 

Example 3

Only the orange above is retained.

 
# Test3 {Height: 0; width: 0; overflow: hidden; font-size: 0; line-Height: 0; border-color: # ff9600 transparent; border-style: solid; border-width: 20px ;}
 

However, IE6 does not support transparency ~~~, Will appear

Find a solution in an article with transparent borders under IE6, as shown in the following example:

 

Example 4

In IE6, set the border-style of the remaining three sides to dashed to achieve transparent effect ~ For details, refer to reference 3.

 
# Test4 {Height: 0; width: 0; overflow: hidden; font-size: 0; line-Height: 0; border-color: # ff9600 transparent; border-style: solid dashed; border-width: 20px ;}
 

Of course, in IE6, if you do not set transparency, you can set the color to the background color so that it cannot be seen.

 

Example 5

The oblique edges of the small triangle we drew above depend on the sides of the original box, and there is another form of the small triangle, that is, the oblique edges on the diagonal lines of the box.

 
# Test5 {Height: 0; width: 0; overflow: hidden; font-size: 0; line-Height: 0; border-color: # ff9600 # 3366ff transparent; border-style: Solid dashed; border-width: 40px 40px 0 0 ;}
 

Keep one of the colors to get the triangle with the oblique side on the diagonal line... Multiple such triangles can be pieced together by setting the border size and color to form any shape of the triangle.

An irregular triangle like this can be extended and placed in a bubble box to save the trouble of creating a background image.

In addition, for a bubble box, you can use the prism character (◆) to set its font-size. The color is the same as the background color. You can use the negative value of margin and the absolute position of absolute to locate the box, see the example.

 

Application rounded corner generation

It should be said that it is an approximate rounded corner, which is actually displayed by a very small trapezoid.

-Upper trapezoid (no upper border, 3 px width at the lower left and right, left and right color removed) + rectangle + lower Trapezoid

Adaptive rounded corner 1:

-The entire RC is set to float: Left or display: inline-block, which can be divided into top, BD, bottom, and top layers RC1 and RC2. RC1 only sets border-top, the height is 0, and the left and right sides of the margin are set to a short horizontal line. RC2 only sets the left and right border, the left and right margin is smaller than RC1, and the height is 1px. The center BD sets the Left and Right Border;

-Bug in IE 6 & 7: RC is still displayed as dispaly: Block in IE6, while top and bottom in IE7 are reduced to one and cannot be extended, in RC1/RC2/RC3, after inserting a text XXX, the text can only be extended to the text width and cannot be aligned with BD.

-See adaptive rounded corner 1.

Adaptive rounded corner 2

-From the 1px rounded corner button of Google products, three-layer Div, the outermost div1 is normally set with a Border Width of 1px, showing the upper and lower border lines. In the middle div2, only the left and right sides of the border are set, in addition, the left and right margin values are set to a negative value, and only the left and right sides of the four inner dots at the rounded corner are set to div3. At the same time, the height of div2 is left and right out of margin, the value of margin is the same as that of div2.

-See adaptive rounded corner 2.

Other minor issues

-Transparency:

The IE6 browser does not support the transparent properties of transparent. For the border triangle generation technology, you can directly set the border-style attribute of the corresponding transparent border to dotted or dashed to solve this problem, the reason is that in IE6, the dotted line and dotted line are based on the Border width. The dotted line length must be more than three times its width (height> = border-width * 3 ), the width of the dotted line must be more than 5 times the width (height> = border-width * 5). Otherwise, the dotted line and dotted line will not appear.

-IE6 parity BUG:

If the height or width of the positioning box is odd, the low position and right position of the absolute positioning element in IE6 will have a 1 pixel error. therefore, try to ensure that the height or width of the outer frame is an even value.

-IE6's empty Div height BUG:

In IE6, the empty Div has an inexplicable height, that is, height: 0; not used. In this case, the actual proportion of the sharp angle is higher than that of other browsers. you can use font-size: 0; + overflow: hidden; to fix this problem.

-Filter: chroma Filter

This attribute can set the color specified in an object to transparent, for example:

Border-color: pink; filter: chroma (color = pink );

 

References

1. CSS small triangle principle
2. CSS bubble effect
3. Principle of border transparency under IE6
4. Machine cat graphics implemented by css3