CSS Triangle

Create a pure-CSS triangle in any direction. Free, runs entirely in your browser — no signup, and nothing you paste in is uploaded.

The triangle trick exploits how borders meet. Give an element zero width and height and thick borders, and the four borders meet at diagonals through the centre — so making three transparent leaves one triangle. It predates `clip-path` by many years and still works everywhere.

Direction is inverted from what people expect: a triangle pointing up is made by colouring the *bottom* border, because that border is the one whose visible wedge points upward. For anything more complex than a tooltip arrow, `clip-path` with a polygon is more readable, but it needs an actual sized box to clip.