CSS Triangle Generator

Create pure CSS triangles using borders.

Direction

Width (100px)

Height (100px)

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent oklch(var(--p)) transparent;
}