Use css to draw triangles and css to draw triangles

Use css to draw triangles and css to draw triangles

I saw some questions asking how to draw triangles with css.

As we all know, many images can be split into triangles, so a lot of interesting shapes can be drawn by drawing triangles.

 

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

If you adjust the width to a large value and change the color in different directions, you can find that the border of the box model is the same as the four trapezoid lines.

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

1 border: 100px solid transparent // border 100px, solid line, transparent color, the following three lines of code are equivalent to this sentence 2 border-width: 15px; // border-width indicates border3 border-style: solid in all directions; 4 border-color: transparent;

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

1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent; // left width: 50px, solid line, transparent color: 4 border-right: 50px solid transparent; // The right side is the same as 5 border-top: 100px solid red; // The top is Px in width, solid line, and red.

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

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

The height of the left and right sides of the border determines the height of the triangle.

The triangle height is determined by the Border width.

So how to generate a triangle like this pointing to the lower right or lower left?

I believe you can see from the figure above.

We only need two borders.

1     width: 0;2     height: 0;3     border-top: 100px solid red;4     border-right: 100px solid transparent;

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

Remember border-width.

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

 

Reprinted please contact