Continuing with our series on creating shapes with CSS, this blog post will take you through different approaches to create a Triangle using CSS!

1. The border (mis)use #

HTML/CSS don't give us a way to create a triangle directly. But a common known hack is to use the border property to create one.

Here's a good way to visualize how a border can create a triangle. This is a box with 4 borders, each of different colors.

.element {
  width: 100px;
  height: 100px;
  background-color: #007BFF;
  border: 20px solid;
  border-color: orange blue green yellow;
}

Notice what happens if you make the box dimensions zero!

.element {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: orange blue green yellow;
}

For a zero dimension box, the individual borders will form a triangle. And then its just a matter of picking one of those triangles by making the others transparent.

.element {
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: orange transparent transparent transparent;
}

To resize the triangle all we need to do is manipulate the border widths.

2. Using clip-path #

We have seen how clip-path property lets us create rectangles and circles. It can also create triangles with the polygon() function. You just need to specify the 3 points of the triangle.

.element {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

3. Using linear-gradient #

Say we have a box with a slanted 2-color linear gradient with hard stop between the colors, like so:

.element {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, orange 50%, royalblue 0);
}

What if the 2nd color becomes transparent? 🤔

.element {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, orange 50%, transparent 0);
}

Yup, you are left with a triangle! 🤯 The dimensions of the box can now be adjusted to manipulate the triangle's size.

One thing to note here, this technique only works for right-angled triangles, since one corner (90 degrees) of the box is always used.

4. Using conic-gradient #

A similar thing can be done with conic-gradient property. Look at this box with a 4-color conic gradient, containing hard stops between the colors.

.element {
  width: 100px;
  height: 100px;
  background: conic-gradient(from -45deg,orange 90deg, royalblue 0, royalblue 180deg, red 0, red 270deg, green 0);
}

You see something similar? We got a similar result like the 4-color border method. You know the drill now, keep the triangle we want and make rest of the colors transparent!

.element {
  width: 100px;
  height: 100px;
  background: conic-gradient(from -45deg,orange 90deg, transparent 0, transparent 180deg, transparent 0, transparent 270deg, transparent 0);
}

And since the other 3 colors are all transparent, we can merge those color-stops into one:

.element {
  width: 100px;
  height: 100px;
  background: conic-gradient(from -45deg,orange 90deg, transparent 0);
}

Voila!

Bonus: Code-golf techniques #

One code-golfing way to create a triangle is to use the unicode character - "▴". And then to adjust its dimensions, we can use the font-size or scale property.

<div>▴</div>
<style>
  div {
    color: orange;
    font-size: 10rem;
  }
</style>

And then of course, you can scale the triangle to any size you want.

<div>▴</div>
<style>
  div {
    transform-origin: top left;
    color: limegreen;
    scale: 8 4;
  }
</style>

🕹️ Here are the all the demos from the article to play with - webmaker.app/create/nRUnACGp0i.

Those are the different ways to create triangles with CSS! Hope you enjoyed some CSS art. I'll see you in the next article of the "Shapes with CSS" series.