How to create triangles in CSS

In this post, we are going to see a simple method to draw a triangle in CSS using borders.

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

Triangle Up

Triangle is one of the simplest shapes in geometry. It can be drawn with just three straight lines and a couple of angles.

1. Set a width and height of 0.
2. Set the border color to transparent.
3. Set the top border to 0.
4. Set the side borders to half the width.
5. Set the bottom border to have the full height.
6. Set a color for the bottom border.

.triangle-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; 
  border-bottom: 15px solid red;
}

Triangle Down

.triangle-down {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid blue;
}

Triangle Left

.triangle-left {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent; 
  border-right: 15px solid yellow; 
}

Triangle Right

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

Comments

[Andrew Bone]

Let's not forget pointing into the corners too 😁

[Tracy Gilmore]

Using the borders alone is fine for triangles (arrows) pointing in the cardinal (NESW) and ordinal (NE,SE,SW & NW) directions, but CSS has far more to offer.

Using the transform property we can rotate the triangle in any direction. Using the skew transform we can easily make triangles more acute or obtuse.

We can do even better than that using the clip-path property with the relatively new path function.

[Bartosz Wójcik]

Use SVG for that... meh.