Drawing a triangle with CSS

It’s a simple classic trick: you need a triangle shape, you might use an image or vector icons like font-awesome, or you can go with a more lightweight solution with CSS. I will walk you through how it works:

Let’s create a box:

.triangle {
  width: 100px;
  height: 100px;
  border: 5px solid #ff2e63;
}

Result:

What if we increase the border thickness:

.triangle {
  width: 100px;
  height: 100px;
  border: 100px solid #ff2e63;
}

Result:

And let’s hide other borders except the border-bottom:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #ff2e63;
}

Result:

Sweet! how about reduce the size of the box to 0?

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #ff2e63;
}

Result:

This is a lightweight and very simple snippet to draw a triangle shape with CSS! You can change the direction of the arrow by toggle border-left, border-right, or border-top.