CSS Triangle Generator

Generate CSS triangles using border tricks. Choose direction, size, and color, then copy the CSS.

Preview

Settings

Direction

Width80px

Height60px

Color

CSS Code

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #3b82f6;

Was this page helpful?

Related tools