CSS Triangle Generator | Create Custom CSS Triangles

Triangle Generator

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 50px 25px;
  border-color: transparent transparent #6366f1 transparent;
}

CSSSASSSCSS

Edit

Direction

Triangle Type

Two equal sides create a balanced triangle. Height can be adjusted independently.

Width:

Height:

Color

What is Triangle Generator?

The Triangle Generator helps you create CSS triangles using the border method. Choose direction, size, and color to generate clean, cross-browser compatible CSS code for triangular shapes.