Introducing tips for drawing triangles with CSS!

Using block elements in CSS, you can rotate and overlap rectangles to create various shapes.
However, the triangle is not prepared from the beginning.

In this article, I’ll show you how to use block elements to draw triangles.

How to draw a basic rectangle

First, I will show you how to draw a rectangle.

CSS

div.rectangle {
  width:40px;
  height: 40px;
  background-color: #99d;
}

HTML

<div class="rectangle"></div>

With CSS, you can create a rectangle simply by specifying the width, height, and background-color without any special settings.
You can also display text inside a rectangle by putting text inside the “div” tag.

how to draw a triangle

As explained in how to draw a rectangle, CSS does not specify any particular shape, so when drawing a triangle, it is not possible to specify “triangle”.
I’ll explain how it works later, but let’s take a look at an example first.

CSS

div.triangle {
  width: 0;
  height: 0;
  border-bottom: solid 20px red;
  border-top: solid 20px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

HTML

<div class="triangle"></div>

It’s not an equilateral triangle, but a triangle is shown. This is the basic form.
Let’s check how it works.

How triangles are displayed

Triangles are made by adding borders to quadrilaterals and making them extremely thick .
When adding a border (border) with CSS, if you set it to the top, bottom, left, and right, the adjacent line and border are set like a picture frame.
If the size of the original square is set to 0, it becomes a shape with 4 triangles side by side.

Let’s check it with a border

Let’s check how the display will look if we change the size of the rectangle with the same border thickness.

CSS

div.box {
  display: flex;
  align-items: center;
  justify-content:space-around;
  width: 400px;
}

div.rectangle {
  border-bottom: solid 20px red;
  border-top: solid 20px blue;
  border-left: solid 20px green;
  border-right: solid 20px gray;
}

.size-40 {
  width:40px;
  height:40px;
}

.size-20 {
  width: 20px;
  height: 20px;
}

.size-0 {
  width: 0;
  height: 0;
}

HTML

<div class="box">
  <div class="rectangle size-40"></div>
  <div class="rectangle size-20"></div>
  <div class="rectangle size-0"></div>
</div>
<div class="box">
  <span>width=40px</span>
  <span>width=20px</span>
  <span>width=0</span>
</div>

In this sample, the border on the top, bottom, left, and right is specified as 20px of a straight line (solid).
If you reduce the size of the rectangle in that state, the proportion of the border part will gradually increase.
Finally, if you set the size to 0, you will get 4 triangles.
It is also possible to create a trapezoid by using an intermediate process.

Make unnecessary parts transparent

The first sample showed only red triangles.
The remaining triangles actually exist, but are hidden.

Let’s check the CSS again to see how it’s set.

div.triangle {
  width: 0;
  height: 0;
  border-bottom: solid 20px red;
  border-top: solid 20px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

Only the border-left is colored, and the remaining three are specified as “transparent”.
“transparent” means “transparent” and is used when “the border area is reserved but there is no drawing color”.
If you set the color only in one place and make the other transparent, the triangle will be displayed.

If other parts are not set here, unexpected display may occur. Let’s take a look at a sample with only the bottom and left set.

CSS

div.rectangle {
  border-bottom: solid 20px red;
  /*   border-top: solid 20px transparent; */
  border-left: solid 20px transparent;
   /*border-right: solid 20px transparent;*/
}

.size-0 {
  width: 0;
  height: 0;
}

HTML

<div class="rectangle size-0"></div>

Even if it is troublesome, let’s set the frame in all four places.

Display other triangles

The example above shows the “border-bottom”, but you can of course also show other oriented triangles.

CSS

.right {
  width: 0;
  height: 0;
  border-bottom: solid 20px transparent;
  border-top: solid 20px transparent;
  border-left: solid 20px green;
  border-right: solid 20px transparent;
}

.left {
  width: 0;
  height: 0;
  border-bottom: solid 20px transparent;
  border-top: solid 20px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px green;
}

.bottom {
  width: 0;
  height: 0;
  border-bottom: solid 20px transparent;
  border-top: solid 20px green;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;  
}

.top {
  width: 0;
  height: 0;
  border-bottom: solid 20px green;
  border-top: solid 20px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;  
}

Note that there are actually other triangles that aren’t visible, so there will be some space around them.
If you want to align and display, you can adjust by setting the value of the opposite side of the triangle to be displayed (border-top for border-bottom, border-right for border-left) to 0.

Advanced version: Let’s change the shape of the triangle

Like a square, this triangle can also change the angle and aspect ratio.

change the angle

To change the angle of the triangle, use the “rotate()” function of the “transform” property.
In the sample, the triangle is rotated 30 degrees to the right.

CSS

div.triangle {
  width: 0;
  height: 0;
  border-bottom: solid 20px red;
  border-top: solid 20px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  transform: rotate(30deg);
}

HTML

<div class="triangle"></div>

make an equilateral triangle

By changing the thickness of the border, you can create triangles of various shapes. It is also possible to make an equilateral triangle (a shape close to it).
The reason why it is “close shape” is that if you try to make an equilateral triangle with this method, √ (root) will be included in the numerical value.
By setting the width of “border-left” and “border-right” multiplied by √3 to the width of “border-bottom”, it becomes an equilateral triangle. By rounding off the resulting value, the appearance can be made into an almost equilateral triangle.

CSS

div.triangle {
  width: 0;
  height: 0;
  border-bottom: solid 35px red; /*だいたい1.73倍*/
  border-top: solid 0px transparent;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

HTML

<div class="triangle"></div>

summary

I introduced a trick to draw a triangle with CSS.

If you set a triangle with CSS, you can easily put text in the triangle because it is not an image.
It takes some ingenuity to make a complicated shape, but please try it.