CSS Triangle Generator

Generate CSS triangles using border technique.

Generators

Developer

Generate CSS Triangle

Generate CSS triangles

Preview

Direction

Width: 60px

Height: 60px

Color

Unit

CSS Output

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

About Triangle Generator

Create CSS triangles using the border trick. Choose from 8 directions including corners. Useful for tooltips, arrows, decorative elements, and dropdown indicators without needing images or SVGs.

Related Tools

CSS Gradient Generator

Generate CSS gradients

Box Shadow Generator

Generate box shadows

Random String Generator

Generate random strings

Random Email Generator

Generate fake emails