CSS Triangle Generator — Pure-CSS Arrows & Carets
Make a triangle with nothing but CSS borders — pick a direction, size and colour, and copy the declaration.
—
What this tool does
It writes the CSS for a solid triangle — an arrow, a caret, a tooltip pointer — using only borders, with no image or SVG. You pick a direction, a base width, a height and a colour, and it produces the declaration that draws the shape. The preview shows the exact result, scaled to what you set.
How the border trick works
A box with zero width and height has no content, but its borders still exist — and where two borders meet, the join is a diagonal cut. If one border is coloured and its two neighbours are transparent, the coloured border's visible half is a triangle. The transparent borders are what slice its ends off into a point, which is why the code needs three borders even though only one is visible.
The numbers that matter
| You want | CSS |
|---|---|
| Height of the triangle | The coloured border's width |
| Half the base width | Each transparent side border's width |
| A hard, solid colour | Any hex or rgb colour on the coloured border |
CSS triangle or SVG?
For a tiny solid indicator the CSS triangle wins: it is a few bytes, needs no network request, and scales with the element. Reach for SVG when the shape is curved, multi-coloured, or needs its own outline — the CSS trick cannot draw a border around itself without a second stacked triangle, and it cannot round the points. For dropdown carets and tooltip arrows, though, nothing beats it for weight.
Frequently asked questions
How does a CSS triangle work with no image or SVG?
It uses the way borders meet at a corner. A box with zero width and height, one coloured border and the other three transparent shows only a triangle — the coloured border's visible half, because the transparent neighbours cut its ends off diagonally. It has been a reliable CSS technique since the early web and is supported everywhere.
How do I set the size?
The triangle's height is the coloured border's width, and its base is twice the width of one transparent side border. So a 20px base and 16px height use a 16px coloured border and 10px transparent side borders — which is what the width and height fields compute for you.
Why is the triangle's code three borders?
A triangle needs one coloured border to be the shape and two transparent ones to cut it to a point. The fourth edge has no border at all in the simple case. The generator writes exactly those three, so the output is the minimum that produces the shape.
When should I use this instead of an SVG?
For a small, solid, single-colour arrow or caret inside a UI — a dropdown indicator, a tooltip pointer, a play arrow — the CSS triangle is a few bytes and needs no request. For anything multi-coloured, curved or large, an SVG is the better tool.
Can I make a triangle with a border around it?
Not with the same element — the technique needs the transparent borders to form the point. To outline a CSS triangle you stack two of them, a slightly larger one behind in the border colour and the fill colour on top. That is the standard "triangle with a border" pattern.
Is anything uploaded?
No. The CSS is generated in your browser and nothing is sent anywhere.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- CSS Backgrounds and Borders Module Level 3 — border colour at corners (W3C).
Everything runs in your browser — nothing you type is uploaded.