About this tool
Produce a pure-CSS triangle using the classic border trick — pick a direction, size and colour, then copy the rule. The preview updates live and everything runs in your browser.
Frequently asked questions
How does the border trick work?
An element with zero width and height shows only its borders; making three borders transparent leaves one coloured border shaped as a triangle.
Why is width and height set to 0?
With no box area the borders meet at the centre, so the single visible border becomes a clean triangle instead of a thick edge.