About CSS Triangle Generator
A CSS triangle is a shape drawn without images by giving an element zero width and height and thick borders. Where borders meet they form diagonal edges, so making three sides transparent and one colored leaves a triangle. This generator computes the border widths for the direction, width, and height you set. The same shape can also be made with clip-path: polygon(), which allows backgrounds and gradients inside the triangle.
How to use CSS Triangle Generator
- Fill in "Direction", "Width", "Height" and "Color".
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about CSS Triangle Generator
Why does the triangle element have zero width and height?
With no content box, the element consists only of its borders, and each border becomes a triangle that meets the others at the center. Making three of them transparent leaves the one you want.
Runs in your browser. Page last updated .