Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Principle 1.

In fact, it is very simple to use div borders. When a div has a large enough border and a small enough width and height, the center of the div is “squeezed out” by the border, leaving only four borders, and the border looks like a triangle.

Below is a normal box, just to distinguish it, with four different colors and larger widths.

Decrease the div width, height, and increase the width of the border:

Continue to decrease the div width, height, and increase the border width:

When the width and height of the div are reduced to 0, the triangle shape appears.

Show only one triangle and hide the other three borders:

A simple triangle is drawn!

2. To summarize

The code for the last triangle above:

<div class="triangle"></div>
Copy the code
.triangle {
    width: 0;
    height: 0;
    border: solid 60px;
    border-color: transparent transparent red transparent;
}
Copy the code

60px here represents the height of this isosceles right triangle:

If you want to adjust the shape of the triangle, change the width of each border.

Here is the style code for several different triangles:

(1)

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 50px 0;
    border-color: transparent transparent red transparent;
}
Copy the code

(2)

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 100px 50px;
    border-color: transparent transparent red transparent;
}
Copy the code

(3)

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: transparent transparent red transparent;
}
Copy the code

(4)

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 100px 30px;
    border-color: transparent transparent red transparent;
}
Copy the code