How does the CSS triangle border trick work?

An element with zero width and height shows only its borders. By making three borders transparent and giving one a colour, the coloured border renders as a triangle pointing away from that edge.

Can I change which way the triangle points?

Yes — the direction control moves the coloured border to a different edge. A coloured bottom border points up, a coloured left border points right, and so on.

Is anything uploaded?

No — the triangle CSS is generated entirely in your browser.

CSS Triangle Generator

Make CSS triangles with the border trick and copy the code.

CSS triangle generator

Make a pure-CSS triangle using the classic border trick: an element with zero width and height shows only its borders, so giving one border a colour and the others transparent produces a triangle. Choose the direction, base and height, and colour — then copy the CSS. No images, no SVG.

Everything runs in your browser — nothing is uploaded.