CSS Triangle Generator
Generate the CSS to make a triangle shape, in any direction and colour.
Triangles from a clever trick
CSS has no triangle shape, but there is a long-standing trick to make one using borders, and this generates the code for a triangle in the direction, size and colour you want — so you get a working triangle without remembering how the border trick works.
Set the direction and colour to get the triangle CSS.
Why the border trick works
The technique is a neat piece of CSS lore: an element with zero size and thick borders shows each border as a triangle where they meet at the corners, so by making three borders transparent and one coloured, you are left with a single triangle. It is genuinely useful for the small pointed shapes interfaces need — the little arrow on a tooltip or speech bubble, a dropdown caret, a ribbon end. These are exactly the cases where you want a shape without an image. The syntax is unintuitive enough that generating it beats recalling it, and modern alternatives like clip-path can also make triangles, but the border trick remains the classic, widely-supported way.
Frequently asked questions
How does CSS make a triangle with no triangle shape?
With a border trick — an element with zero size and thick borders shows a triangle where borders meet; make three transparent and one coloured to leave one triangle.
What are CSS triangles used for?
Small pointed shapes like tooltip and speech-bubble arrows, dropdown carets and ribbon ends — cases where you want a shape without an image.
Is anything uploaded?
No. The code is generated in your browser.