Detailed explanation of triangle drawing and clever application examples in CSS

lead

Some common triangles on web pages can be drawn directly using CSS without having to be made into pictures or font icons. As stated on Xiaomi’s official website:

And from the JD website:

So how are these triangles implemented through CSS?

Triangle Implementation

We can do this by setting the width and height of a div container to 0, and then setting the border of the container.

.box {
            height: 0;
            width: 0;
            border-color: wheat skyblue pink rgb(154, 121, 230);
            border-style: solid;
            border-width: 40px;
        }

The above code can achieve the following effects:

In the above code, the width and height of the box must be 0, the color values ​​of the borders are top, right, bottom, and left, respectively, the borders are solid lines, and the width of the four borders is 40px, thus resulting in 4 isosceles right triangles. The size of the triangle depends on the width of the border. The larger the border-width value, the larger the triangle.

If only one of the triangles is needed , this can be achieved by setting the other border colors to be transparent. To achieve the following effects:

You can set the color value of border-top, border-bottom, and border-left to transparent to achieve this.

.box {
            height: 0;
            width: 0;
            border-color: transparent skyblue transparent transparent;
            border-style: solid;
            border-width: 40px;
        }

What if what is needed is not an isosceles triangle? How to achieve it?
As mentioned above, the size of the triangle depends on the value of border-width. The values ​​in the four directions are set to the same value, so the result is an isosceles triangle. By changing the border-width value, you can get right triangles of different sizes.

.box {
            height: 0;
            width: 0;
            border-color: transparent skyblue transparent transparent;
            border-style: solid;
            border-width: 80px 40px 0 0;
        }

Then we get the following triangle:

Application of small triangle

In addition to drawing triangles, it can be achieved through position positioning . Such as the effect of displaying prices on the JD.com website mentioned at the beginning.

The trapezoid in this rendering can be achieved by positioning a right triangle as shown below on the right side of the rectangle and setting the background color of the triangle to white.

Of course, the small triangle can use pseudo-elements to simplify the web page structure, but pseudo-elements are inline elements and need to be converted into inline block elements or block-level elements first.

Summarize

When drawing a triangle with CSS, you need to pay attention to the following points:

• The width and height of the container must be 0
• The size of the triangle depends on the border-width value.

This is the end of this article about drawing and cleverly applying triangles in CSS. For more relevant CSS triangle drawing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!