CSS border using small share

A little bit about the border in the lazy chapter, the complete PPT is here.

Principle

CSS Box model

A box includes: margin+border+padding+content

– A smooth diagonal line appears at the junction of the top and bottom border. Use this feature, by setting different top and bottom border width or color can get small triangle, small trapezoid and so on.

– Adjust the width size to adjust the shape of the triangle.

Example 1

Generally, we set the width of the box, and the top and bottom border, will be rendered as shown below

#test1 {
    height:20px;
    width:20px;
    Border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
    Border-style:solid;
    border-width:20px;
}

Example 2

Based on the above, we set the width height to 0 o'clock, which will render the above boundary slash.

#test2 {
    height:0;
    width:0;
    Overflow:hidden; /* Here set overflow, font-size, line-height * *
    font-size:0;     /* is because, although the width height is 0, but under IE6 will have the default
    /line-height:0;  /* Font size and row height, resulting in the box appears to be stretched long rectangle/
    border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
    Border-style:solid;
    border-width:20px;
}

At this point, we've actually seen about four triangles up and down. If, we put 4 colors, only one color, the remaining 3 colors set to transparent (or set to the same color as the back color), then there is a small triangle?

Example 3

Just keep the top orange and see

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

However, IE6 does not support transparent AH ~ ~ ~, will appear in the image below

Find a way to find a solution in an article that is transparent under the IE6 border, as in the following example

Example 4

IE6, set the remaining three edges of the border-style for the dashed,,, can achieve the effect of transparency ~ specific reasons can see reference 3

#test4 {
    height:0;
    width:0;
    Overflow:hidden;
    font-size:0;
    line-height:0;
    Border-color: #FF9600 transparent transparent transparent;
    Border-style:solid dashed dashed dashed;
    border-width:20px;
}

Of course, under the IE6, do not set the transparency, its color set to the background color, so that it can not see it.

Example 5

The hypotenuse of the triangle we draw above is based on the edges of the original box, and there is another form of small triangle, which is the hypotenuse on the diagonal of the box.

#test5 {
    height:0;
    width:0;
    Overflow:hidden;
    font-size:0;
    line-height:0;
    Border-color: #FF9600 #3366ff transparent transparent;
    Border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0;
}

By preserving one of the colors, you can get the triangle on the diagonal of the hypotenuse ... Multiple such triangles, by setting the border size and color, can be pieced together to form triangles of any shape.

Like this irregular triangle, extended, put on the bubble box, you can save the trouble of the background picture.

In addition, with the bubble frame, you can use the prism character () to implement, set its font-size, color and background colors consistent, positioning can be implemented using margin negative values and absolute absolute positioning, see example.

Application of rounded corners generation

It should be said to be approximate rounded corners, which are actually displayed by a very small ladder of height

-Top trapezoid (without upper border, next 3px width, left and right color removed) + rectangle + Lower trapezoid

Adaptive fillet 1:

-The entire RC set to Float:left or Display:inline-block divided into Top,bd,bottom, top has two layers RC1 and RC2, RC1 only set border-top, height of 0, and set around margin A short line, RC2 only set about border and about margin less than RC1, height of 1px, the middle of BD set around border, do not set about margin;

-but the IE 6&7 appear bug:rc in IE6 still show as Dispaly:block, and IE7 in top and bottom shrink into a lump, refused to expand, and in the RC1/RC2/RC3 inserted text XXX can only extend to the text width Degrees and cannot be aligned with BD.

-See adaptive rounded corners 1

Adaptive rounded Corner 2

-from the Google products 1px fillet button,,, three-story Div, the outermost div1 normal set border width of 1px, showing the top and bottom border line, the middle Div2 only set the left and right border, and the left and right margin set to negative, showing the rounded corners of the 4 dots in the inner layer div3 with The sample only sets the left and right borders, while margin up and down the height of the div2, margin also set the same negative value as DIV2.

-See adaptive rounded corners 2

Other minor issues

Transparent

IE6 browsers do not support transparent transparency properties, the Border-style property of directly setting the corresponding transparent border is dotted or dashed to create a triangulation technique, because under IE6, Dotted lines and dashes are based on the width of the border, the line length must be more than 3 times times its width (height>=border-width*3), the dash width must be more than 5 times times its width (height>=border-width*5), Otherwise the dotted line and dashed lines will not appear.

-IE6 odd and even bugs:

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

-IE6 Empty div height bug:

IE6, empty Div will have a sense of height, that is to say, height:0, the sharp angle of the formation of the actual accounting for higher than other browsers are different. can use font-size:0; + overflow:hidden; fix the problem.

-Filter:chroma Filter

This property property can set the color specified in an object to be a transparent color, such as:

Border-color:pink;
Filter:chroma (Color=pink);

Resources

1. CSS Small triangle principle
2. CSS Bubble effect
3. Analysis of the principle of IE6 bottom border transparency
4. CSS3 implements the robot cat graphics