CSS Triangle Generator

Generate CSS triangles using the border trick — no images, no SVG

Direction

Color

#6366f1

Width

80px

Height

80px

Live Preview

▲ Up — 80px × 80px

Generated CSS

Copy this CSS and add a .triangle element in your HTML

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #6366f1;
}