CSS doesn’t have any built-in way to make triangles, but an easy way to solve the problem is to just use borders.

Let’s say we have an element with borders on all sides:

CSS triangle step 1

As you can see, the borders doesn’t have sharp corners, and we can use this to our advantage. If we take away the width and height of the element, the borders will look like triangles:

CSS triangle step 2

We can remove the top border:

CSS triangle step 3

And finally, make the left and right borders transparent:

CSS triangle step 4

It’s as easy as that.

Here’s an animation showing the process:

CSS triangle GIF

Code example


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


.triangle {
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #42A5F5;

See the Pen CSS triangle by Magnus (@magnusb) on CodePen.

Note that it’s trickier if you want the triangle to have a border of its own, or a shadow. This technique works best for simple triangles.