🔺 CSS Triangle Generator

Pick a direction, size and color to generate a pure-CSS triangle using the classic zero-width-border trick.

Direction

Size (px)

Color

Why zero-size borders make a triangle

Adjacent borders meet at a 45° mitre. Collapse the box to nothing with width: 0; height: 0 and all four borders become wedges meeting at a single point - so making three of them transparent leaves one triangle:

width: 0;
height: 0;
border-left:  60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #007BFF;   /* points up */

The two transparent borders are always the pair perpendicular to the direction, and the coloured one is on the opposite side from where the tip points - a border-bottom gives an upward triangle. One size value feeds all three, so it is the half-base and the full height at once: 60px produces a triangle 120px wide and 60px tall. That fixes the shape at a 90° apex with 45° base corners, whatever size you pick.

Adjusting and using it

To change the proportions, edit the copied rule so the two transparent borders differ from the coloured one. Halving the transparent pair to 30px gives a narrow 60×60 spike.
For a right-angled triangle, delete one of the two transparent borders entirely instead of shrinking it.
Tooltip arrows are the usual job: put this on a ::before pseudo-element with content: "", position it absolutely against the bubble, and match the colour to the bubble's background.

The element has no content box at all, so background-color, padding and text do nothing to it, and there is nothing to give a border-radius. If you need a rounded or irregular triangle, use clip-path: polygon(50% 0%, 0% 100%, 100% 100%) instead - that keeps a real box you can style. Mark the element aria-hidden="true" either way, since it is decoration.

Frequently asked questions

How do you make a triangle in pure CSS?

Set width and height to 0, give the two side borders a size with the colour transparent, and give the third border a solid colour. The visible border is the one facing away from the point.

Why is my CSS triangle twice as wide as the size I entered?

Because the left and right borders each get that value. A size of 60 means 60px on each side, so the base is 120px against a height of 60px.

Should I use the border trick or clip-path for triangles?

clip-path is easier to read and lets you keep a real element with a background and content. The border trick still wins for tooltip arrows and on very old browsers, and it costs nothing to render.