CSS Triangle Generator
Pure-CSS triangle with the classic border-trick.
Overview
The CSS Triangle Generator emits the pure-CSS triangle declaration that uses the classic transparent-border trick — a zero-width-height element whose differently-coloured borders meet at a single point. Pick direction (up, down, left, right, or arbitrary corner), base, height, and colour, and copy the CSS.
This is the lookup for designers and developers learning how to create a CSS triangle with borders or how to draw a CSS arrow without images. Reach for it for tooltips, dropdown carets, speech bubbles, ribbon ends, and any decorative pointer.
How it works
A zero-size element with border-width greater than zero shows four triangular borders meeting at the centre. By making three borders transparent and only the fourth a visible colour, the visible border becomes a triangle pointing in the opposite direction. Border widths control base (the perpendicular borders) and height (the visible border itself).
The generator also offers the clip-path: polygon() alternative, which is more flexible for irregular angles but breaks down at small sizes due to antialiasing. The border-trick remains crisp at any size and works in every browser ever shipped.
Examples
- Down-pointing tooltip caret →
width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #333;. - Right-pointing arrow →
border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor;. - Isoceles tall triangle → adjust left/right border widths smaller than top/bottom.
- Equilateral triangle → 1:1.155 ratio of base to height.
FAQ
Border-trick or clip-path?
Border-trick for tooltip carets and small UI arrows — crisp at any size. clip-path for larger decorative shapes where you want responsive scaling.
Can I add a border to my CSS triangle?
Not directly — the trick produces a fill but no outline. Layer two triangles (a slightly larger background-coloured one behind the foreground triangle) to fake a border.
Why does my triangle look fuzzy?
Subpixel rendering. Use integer pixel widths and avoid transform: rotate() on the same element — both cause antialiasing.
Can the triangle be animated?
Yes — animate border-*-color or use a clip-path triangle and animate the polygon vertices. Border-trick triangles can also scale via transform: scale().