CSS Triangle & Arrow Generator
Create pure-CSS triangles without images or SVG. Choose a direction, set the width, height and colour, and copy the ready-made CSS — or spin the shape to any angle.
For shapes beyond triangles, the CSS Clip Path generator is far more flexible; the CSS Triangle tool covers the border-trick version.
How to use the CSS Triangle & Arrow
- 1 Choose the direction the triangle should point.
- 2 Set the width and height, and pick a colour.
- 3 Copy the generated CSS into your stylesheet.
- 4 Adjust the size values if you need a different proportion.
How It Works
The classic technique builds a triangle from a zero-size element with coloured borders. Pointing triangles use two transparent borders and one visible border, which is exactly what this tool generates.
- Up, down, left, right and angled
- Equal-sided or isosceles shapes
- Optional outline effect
- Live preview on a checkered surface
- CSS and Tailwind export
Frequently asked questions
How does a triangle work with only borders?
Because borders meet at mitred corners. Give an element a zero width and height and a thick border on one side, and that border renders as a solid triangle. The technique relies on the mitre, so it works in every browser and needs no image or SVG.
Why are the other three borders transparent?
They have to be, or they would show as solid wedges around the triangle. Setting them to transparent leaves only the coloured border visible, which is what produces a clean shape rather than a filled square with a coloured edge.
Can I add a border or outline to the triangle?
Not with this technique — the shape is a border, so it cannot have its own border. If you need an outlined or rounded triangle, use an inline SVG or a clip-path instead, both of which can be stroked normally.
Related Generators & Misc
You might also need
Tools from other categories that people pair with the CSS Triangle & Arrow: