CSS Triangle Generator

Generate pure-CSS triangles with the border trick — pick a direction, size and color, then copy the CSS.

How to use CSS Triangle Generator

1. Choose a direction — up, down, left, right, or one of the four diagonal corners.
2. Set the width and height to control the triangle's base and point.
3. Pick the fill color for the visible side of the triangle.
4. Click Copy CSS to copy the width, height and border declarations.

What is CSS Triangle Generator?

FAQ

How does the CSS border triangle trick work?

An element with width 0 and height 0 still renders its borders, which meet at 45-degree diagonal seams. Coloring one border and making the other three transparent leaves a single triangular shape, with its point opposite the colored side.

Why are corner triangles right-angled?

Diagonal directions use only two adjacent borders, so the triangle has a square corner where those borders meet. Because both sides come from the same border width, corner triangles use the width value for both legs and ignore the separate height.

How do I change the triangle's size?

Adjust the width and height: a larger colored border makes the triangle longer in that direction, while the transparent borders set the width of the base. The tool updates the border values for you as you drag the sliders.

Related tools

• Text Shadow Generator
• Neumorphism Generator
• Box Shadow Generator
• Clip Path Generator