Introduction to the method of using CSS to draw triangles

See the interview questions will ask how to use CSS to draw a triangle

It is well known that many graphs can be split into triangles, so that will draw a triangle can draw a lot of interesting shapes

The principle of drawing a triangle is to adjust the width, line style, and color of the four directions of the border (border).

If you make the width big enough to change the color of the different directions, you can see that the border of the box model is four trapezoidal lines.

At this time, if the height,width inside the box model is tuned to 0px, the triangle is formed.

border:100px solid Transparent//border 100px, solid line, transparent color, the following three lines of code equivalent to this sentence border-width:15px; Border-width represents borderborder-style:solid;border-color:transparent in all directions;

If you understand the principle then you should be able to write your own code now.

width:0;    height:0;    border-left:50px solid Transparent;　　　　Left width 50px, solid line, transparent color    border-right:50px solid transparent;　　　　　　　　Right Ibid    . border-top:100px solid red; Top width 100px, solid line, red

The above code can generate a downward triangle. As shown (for ease of understanding I replaced the color on the right)

From this we can see that to create a triangle we need three borders.

The height of the left and right border determines how long the triangle is high.

The height of the triangle is determined by the width of the border

So how do you generate a triangle that points to the lower right or lower left?

I believe you have seen it through the above figure.

All we need is two borders, and that's enough.

width:0;height:0;border-top:100px solid red;border-right:100px solid transparent;

This code generates a triangle pointing to the lower left, and the bottom and height are 100px.

Do you remember border-width?

It can define the width of the four borders with a single line of code.