CSS Border Implementation Triangle

First, the principle

CSS Box model

A box includes: Margin+border+padding+content. A smooth diagonal line appears at the junction of the top and bottom 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 borders, which are presented as:

    {              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, the IE6 will have a default*/Line-height:0;/*font size and line height, resulting in the box being stretched long 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 4 colors are reserved for only one color, and the remaining 3 colors are set to transparent (or set to the same color as the back color), isn't there a small triangle?

Example 3:
Keep only the red above, such as:

        {             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, the IE6 does not support transparent Ah, will appear the appearance:

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

Example 4:
IE6, set the remaining three sides of the border-style as dashed, you can achieve a transparent effect, for specific reasons see reference 3:

  #test4  { height :  0 ; :  0 ;  overflow :  hidden ;  Font-size :  0 ;  Line-height :  0 ;  Border-color :  #FF9600 Transparent TRANSP Arent Transparent ;  Border-style :  solid dashed dashed dashed ;           Border-width :  20px ; }

Example 5:
The hypotenuse of the small triangle we drew above is based on the edges of the original box, and there is another form of the small triangle, which is the hypotenuse on the diagonal of the box:

  #test5  { height :  0 ; :  0 ;  overflow :  hidden ;  Font-size :  0 ;  Line-height :  0 ;  Border-color :  #FF9600 #3366ff Transparen T transparent ;  Border-style :  solid solid dashed dashed< /span>;         Border-width :  40px 40px 0 0 ; }

By preserving one of these colors, you can get a 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, put on the bubble box, you can save the trouble of the background picture:

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

It should be said to be approximate rounded corners, in fact by a very small height of the trapezoid display. On the trapezoid (no upper border, under the left and right 3px width, left and right color removed) + rectangle + lower trapezoid.

Adaptive rounded Corners 1

The entire RC is set to "Float:left" or "display:inline-block" into top, BD, Bottom,top and two layers RC1 and RC2,RC1 only set border-top, height is 0, and set left Right margin is a short line, RC2 only set about border and left margin is less than rc1,height for 1px, the middle BD set around border, not set left and right margin. – however Ie6&7 appears 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, cannot be aligned with the BD.

Adaptive rounded Corners 2

From Google products 1px rounded button, a total of three 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, Inner layer Div3 also only set the left and right border, while margin up and down the div2 height, margin is also set with Div2 the same negative value.

Third, other small issues 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;" Does not do, the sharp angle formed at this time actually accounted for higher than other browsers are different. can use "font-size:0;" + "Overflow:hidden;" Fix this 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);

CSS Border Implementation Triangle