The principle of drawing triangles

We draw the triangle using the border style. A normal border might look something like this to you

When we increase the width of border, we can see that the adjacent border is directly connected like the common picture frame and window frame.

So, when we set the width of our content to zero. So it becomes something like this. Does this graph remind you of a problem you did when you were a kid, “Count how many triangles there are in it?”

At this point, it’s easy to draw triangles. Just fill in the part of the triangle you want and make everything else transparent.

The HTML code

<div class="triangle-box"></div>
Copy the code

Is a triangle

To draw an equilateral triangle, we need to make the top, left, and right sides transparent

Code implementation:

.triangle-box {
  width: 0;
  height: 0;
  border: solid 30px;
  border-color: transparent transparent # 064420 transparent;
}
Copy the code

del

Similarly, make the bottom, left, and right edges transparent and fill the top with the color we want

.triangle-box {
  border-color: # 064420 transparent transparent transparent;
}
Copy the code

Triangles of different heights

After drawing the triangle, we can also change the width of the border to achieve different height triangles.

Code implementation:

.triangle-box {
  width: 0;
  height: 0;
  border: solid transparent 30px;
  border-bottom-width: 15px; /* You can set different widths to achieve different height triangles */
  border-bottom-color: # 064420;
}
Copy the code

Right triangle

  1. We can combine two adjacent triangles and get a large right triangle
.triangle-box {
  width: 0;
  height: 0;
  border: solid 30px transparent;
  border-bottom-color: # 064420;
  border-right-color: # 064420;
}
Copy the code
  1. Instead of making it transparent, we can remove the adjacent edges and get a smaller right triangle
.triangle-box {
  width: 0;
  height: 0;
  border: solid 30px transparent;
  border-bottom-color: # 064420;
  border-right: none;
}
Copy the code

conclusion

For CSS triangle drawing, we first understand the principle of this border. And then it’s like playing with blocks or coloring. You can create different triangles according to your needs. I suggest you try it yourself.