To create a CSS triangle define an element with a width and height of 0 pixels. The triangle shape will be formed using border properties. For an element with 0 height and width the 4 borders (top, right, bottom, left) each form a triangle. Here’s an element with 0 height/width and 4 different colored borders.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f62bc8ea-c030-472d-829c-d9d6cdc3861f/Untitled.png

By setting some borders to transparent, and others to a color we can create various triangles. For example, in the Up triangle, we set the bottom border to the desired color, then set the left and right borders to transparent. Here’s an image with the left and right borders shaded slightly to show how the triangle is being formed.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/80f6aac3-0fe5-4366-8632-3138f340a37c/Untitled.png

The dimensions of the triangle can be altered by changing the different border widths - taller, shorter, lopsided, etc. The examples below all show a 50x50 pixel triangle.

Triangle - Pointing Up

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c29f9414-83e0-4bc6-9da2-157cffa883cb/Untitled.png

<div class="triangle-up"></div>
.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Down

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5e254920-3c3f-4fbc-a418-0ef19be48c64/Untitled.png

<div class="triangle-down"></div>
.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Right

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f3a7269a-1048-4fe9-bc5f-406c946469ac/Untitled.png

<div class="triangle-right"></div>
.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Left

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dd8ce902-d3db-4b03-ae2f-ce17f94c2df4/Untitled.png

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