How to create a triangle with CSS

We can create a triangle by using thick borders. All we need is one div.

1

<div class=”tri”></div>

Let’s create a square. Normally, when we add borders to an element, we only use 1px or 2px. What if we add thicker borders like 20px? Here is a CSS

1
2
3
4
5
6
7
8

.tri {
    height: 20px;
    width: 20px;
    border-top: 20px solid blue;
    border-right: 20px solid green;
    border-bottom: 20px solid orange;
    border-left: 20px solid red;
}

I use different colours for each side of a border, so you can see where one edge ends and the next begins. Below is what we got.

What happens if we set the height and width of the square to 0?

All the borders come together and join in the middle. Now you can see that each border forms a triangle. The size of an arrow is determined by the width of a border. In this example I used 20px.

For example, if you want a down arrow, you can use a top border and use transparent as a colour for the rest. The same principle applies to other arrows.

1
2
3
4
5
6
7
8

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