CSS Triangle Generator

Generate a pure-CSS triangle using the border trick, with direction, size and color controls.

Color

Size60px

CSS

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

Triangles are made from an element with zero size and thick, partly transparent borders — a classic CSS trick that needs no images. Runs locally.