Small triangle in css implementation (Principle)-lin Qiqi

Css Implementation of small triangle (Principle)-lin Qiqi Ru (Simple demonstration, ugly, do not mind)

PS: compatible with IE, FF, chrome, and 360 secure browsers

Let's talk about the principle first, as shown in figureAs shown in:

The p style is as follows:

p{    width: 0px;    height: 0px;    border-width: 20px;    border-style: solid;    border-color: lightgreen pink yellow lightblue;}

Explanation: When the width and height of p are 0, if the border width is set and the color is set, p is divided into four small triangles,

So when we want a small triangle, we only need to hide the other three (method: Set the three sides to transparent ).

Top triangle :()

Corresponding CSS code:

#triangle{    width: 0px;    height: 0px;    border-width: 20px;    border-style: solid;    border-color: transparent transparent yellow transparent;}

To make it adapt to various browsers as much as possible, we add several lines of code (mainly to solve IE compatibility issues ):

 1 #triangle{ 2     width: 0px; 3     height: 0px; 4     *width: 40px;    5     *height: 40px; 6     font-size: 0; 7     line-height: 0; 8     overflow: hidden; 9     border-width: 20px;10     border-style: dashed dashed solid dashed;11     border-color: transparent transparent yellow transparent;12 }

Explanation:

① Border-color: transparent yellow transparent;

Because we want the upper triangle, we need to keep the lower border, so we set the other three sides as transparent;

② Border-style: dashed solid dashed;

Setting the other three sides to dashed is because IE6 does not support transparent attributes, so we set the style of the other three sides

Dashed and dashed are hidden when the Border width is large. (I am sorry that I have never practiced ie6 on my computer)

③ Font-size: 0; line-height: 0; overflow: hidden;

If you do not add these three statements, the following results will be displayed:

That is to say, under IE, not a triangle, but a trapezoid.

④ Added two more css hack statements:* Width: 40px; * height: 40px;

When I tested the results with IE, I found that I could not find the triangle at all, and I couldn't find any questions about searching various blogs on the Internet. Then I added a sentence

The width & height style appears in the small triangle. It should beIn IE, the width and height of p include border (I still don't know much about this,Hope you have answers ).

To solve this problem in IE, I added these two css hack statements. If you do not think it is safe, you can add "_ width: 40px; _ height: 40px ;"

PS:① IE6 and IE7 can recognize "*", IE6 can recognize "_", and specifically search for "CSS hack ".

② * Width should be set to twice the border-width, * the same is true for height.

For the lower triangle, the Left triangle, and the right triangle, you only need to change the two CSS statements in the upper triangle, and the others do not need to be changed. The changed code is as follows.

Lower triangle:

border-style: solid dashed dashed dashed;border-color: lightgreen transparent transparent transparent;

Left triangle:

border-style: dashed solid dashed dashed;border-color: transparent pink transparent transparent;

Right Triangle:

border-style: dashed dashed dashed solid;border-color: transparent transparent transparent lightblue;

Finally, the Code of 1 is given:

1/* css */2*{3 margin: 0px; 4 padding: 0px; 5 text-align: center; 6} 7 # container {8 position: relative; // This sentence is very important, because the small triangle is relative to the parent element # container to absolutely locate 9 width: 50px; 10 height: 40px; 11 border: 1px solid lightblue; 12 margin: 200px auto; 13 padding: 20px; 14 15} 16 # chat {17 width: 50px; 18 height: 40px; 19 background-color: lightblue; 20} 21 # triangle {22 position: absolute; // set the absolute position of the small triangle. 23 width: 0px; 24 height: 0px; 25 * width: 14px; 26 * height: 14px; 27 font-size: 0; 28 line-height: 0; 29 overflow: hidden; 30 border-width: 7px; 31 border-style: dashed solid; 32 border-color: transparent lightblue; 33 top: 33px; // 33px: parent element # container's padding: 20px + # half of chat width: 20px-element # side width of triangle: 7px = 33px34 left: 70px; // 70px: # chat width 50px + parent element # container internal margin 20px = 70px35}

/* Html code */
    
    

If you have any shortcomings, you are welcome to criticize and advise. O (∩ _ ∩) O thank you.