CSS Triangle Generator
Create pure CSS triangles for tooltips, arrows, and decorative shapes. No images needed!
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #6366f1;Features
- 8 directions
- Custom size
- Any color
- Pure CSS
- Live preview
- One-click copy
How to Use
- 1Select direction
- 2Adjust size
- 3Pick color
- 4Copy CSS
Frequently Asked Questions
How do CSS triangles work?
They use transparent borders on 3 sides and a colored border on 1 side to create the triangle shape.
Can I make equilateral triangles?
For perfect equilateral triangles, use height: √3/2 × width. These are isoceles triangles.