CSS Triangle Generator

Pure-CSS triangle with the classic border-trick.

Direction Size (px) Color

.triangle-up {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 24px solid #3b82f6;
}

About this tool

Generate a triangle using the empty-element-plus-borders technique. Pick a direction, size and color — copy the resulting CSS.