CSS border making small triangles and applications (compatible with IE6)

Before the lazy chapter to share a little about the border picture of the content, the full ppt here.

Principle CSS Box model

A box includes: margin+border+padding+content

– A smooth diagonal line appears at the junction of the upper and lower borders. Using this feature, by setting different upper and lower left and right border width or color can get small triangle, small trapezoid and so on.

– Adjust the width size to adjust the triangle shape.

Example 1

In general, we set the width of the box, and the upper and lower left and right border, will appear as

#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 the IE6 will have the default */    line-height:0;  /* Font size and line height cause the box to render a long rectangular open rectangle *    /border-color: #FF9600 #3366ff #12ad2a #f0eb7a;    Border-style:solid;    border-width:20px;}

At this point, in fact, we have seen up and down about four triangles. If, we have 4 colors, only one color, the remaining 3 colors are set to transparent (or set to the same color as the background colors), then there is a small triangle?

Example 3

Just keep the orange on the top 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 the appearance of

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

Example 4

IE6, set the remaining three edges of the border-style for dashed,,, can achieve a transparent effect ~ Specific reasons can be seen in 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 IE6, do not set the transparency, the color is set to the background color, so that it can not be seen is also possible.

Example 5

The hypotenuse of the small triangle we painted above is based on the edges of the original box, and there is another form of the small triangle, 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;}

Keep One of the colors, you can get the triangle on the diagonal of the hypotenuse ... Multiple such triangles, by setting the border size, color, piece together can form any shape of the triangle.

Like this irregular triangle, extend a bit, put on the bubble box, you can save the trouble of spelling the background picture.

In addition, about the bubble box, you can use the rib character () to implement, set its font-size, color and background colors consistent, positioning can use margin negative value and absolute absolute positioning to achieve, see example.

Application of fillet generation

Should be said to be approximate rounded corners, actually by a very small trapezoidal display

-Upper trapezoid (no upper frame, left and right 3px width, left and right color removed) + rectangle + Lower trapezoid

Adaptive fillet 1:

-The entire RC is 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 is 0, and set left and right margin A short horizontal line, RC2 only set the left and right border and margin is less than RC1, height of 1px, the middle BD set around border, do not set left and right margin;

-but IE 6&7 appear bug:rc in IE6 still show as Dispaly:block, and IE7 in the top and bottom into a lump, refused to expand, and in rc1/rc2/rc3 inserted text XXX can only extend to the text width Not aligned with the BD.

-See adaptive fillet 1

Adaptive rounded Corners 2

-From the 1px corner button of Google products,,, three-layer Div, the outermost div1 normal set border width 1px, showing the upper and lower border line, the middle Div2 only set the left and right border, and the left and right margin set to negative value, showing the rounded corner of the 4 dots inside the layer div3 the same Just set the left and right border, while margin up and down the div2 height, margin is also set with Div2 the same negative value.

-See adaptive fillet 2

Other minor problems

Transparent

IE6 Browser does not support transparent transparent properties, in terms of border generated triangular technology, directly set the corresponding transparent border Border-style property is dotted or dashed can solve this problem, because under IE6, Dotted lines and dashed lines are based on the border width, the point line length must be more than 3 times times its width (height>=border-width*3), the width of the dashed line must be 5 times times more than (HEIGHT>=BORDER-WIDTH*5), otherwise dotted lines and dashed lines do not appear.

-IE6 of odd and even bugs:

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

-IE6 Empty div height bug:

IE6, empty div will have inexplicable height, that is to say height:0, not to work, at this time the sharp angle of the actual accounted for higher than other browsers are different. can use font-size:0; + overflow:hidden; fix the problem.

-Filter:chroma Filter

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

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

Extended Learning (Cool sword original)

Through the above-mentioned article, we learned to use CSS to make a compatible small triangle.
But what's so simple about the everyday little triangle? For example, one of our drop-down menus, with a small triangular line, has a blue border and a white background. This requires the use of two small triangles to make the positioning.

Usually set above the UL relative to the above Li for Position:absolute;

These two small triangle lines are made by pseudo-elements, while some tags are compatible with IE6 and IE7. Such as:

. header. Menu ul:before,.header. Menu ul. before {Display:inline-block;width:0;height:0;overflow:hidden;line-height : 0;font-size:0;vertical-align:middle;border-bottom:7px solid #0088CC; border-top:0 none;border-left:7px Dashed TRANSPARENT;BORDER-RIGHT:7PX dashed transparent;_color: #FF3FFF; _filter:chroma (color= #FF3FFF); content: ""; left : 37px;position:absolute;top:-7px}.header. Menu ul:after,.header. Menu ul. After {Display:inline-block;width:0;height : 0;overflow:hidden;line-height:0;font-size:0;vertical-align:middle;border-bottom:6px solid #ffffff; border-top:0 None;border-left:6px dashed transparent;border-right:6px dashed transparent;_color: #FF3FFF; _filter:chroma (color=# FF3FFF); content: ""; left:38px;position:absolute;top:-6px}

At the same time I also found a bug, that is, under the IE6 when the hidden ul, and then the mouse through Li when the small triangle does not show, do not know what the reason, I passed to UL directly set to Visibility:hidden instead of Display:none, If you also encounter the same situation, hope that the discovery can be useful to you, if you ignore IE6, IE7, then use pseudo-elements directly. Nothing is hack.

Resources

1. CSS Small triangle principle
2. CSS Bubble effect
3. Analysis of transparent principle of IE6 bottom frame
4. CSS3 Realization of Doraemon graphics

CSS border making small triangles and applications (compatible with IE6)