CSS Triangle Generator
Build a pure-CSS triangle using the border trick - direction, size, and color - with a live preview.
Choose a direction, size, and color - the preview updates live and the CSS (using the border technique) is ready to copy.
For more complex or irregular shapes, see the CSS Clip Path Generator instead.
How Does a Pure-CSS Triangle Work?
A CSS triangle is created by giving a zero-width, zero-height element large, differently-colored borders - only the visible border edges form a shape, and making three sides transparent leaves a triangular wedge of the fourth color.
Why Use This Tool?
The border-based triangle technique works but the relationship between border widths and the resulting triangle's exact shape isn't obvious - a live preview shows the actual result as you adjust size and direction.
How to Use It
- Choose a direction (up, down, left, right).
- Set the size and color.
- Copy the generated CSS border declaration.
Limitations
This border-based technique only produces simple equilateral-style triangles - for other polygon shapes, clip-path (see the CSS Clip Path Generator) is more flexible.