CSS Triangle Generator

Name: CSS Triangle Generator
Availability: InStock

Generate pure CSS triangles using the border trick. Choose a direction, adjust size, and copy the generated CSS instantly.

CSS Triangle Generator

Pick a direction, adjust its dimensions, and preview the triangle in real time.

Direction

Width: 100px

Height: 100px

Color

Presets

Generated CSS

.css-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #3b82f6 transparent;
}