Introduction to how to draw a triangle using css

I saw some interview questions asking how to draw triangles with CSS

As we all know, many graphics can be split into triangles, so if you know how to draw triangles, you can draw many interesting shapes

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

If you increase the width large enough and change the colors in different directions, you can find that the border of the box model is four trapezoid-like lines.

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

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

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

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

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

We can see from this rendering that to generate a triangle we need three borders.

The height of the left and right borders will determine how long the height of the triangle is.

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

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

I believe you have already seen it through the picture above.

We only need two borders.

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

This code will generate a triangle pointing to the lower left, with the base and height being 100px.

Do you still remember border-width?

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

The above is the detailed content of Introduction to how to draw a triangle using css. For more information, please follow other related articles on the PHP Chinese website!