CSS Triangle Generator
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #0c6249;The CSS triangle generator produces a triangle from borders alone, with no images and no extra markup. The technique relies on a detail of how browsers draw borders: where two borders meet at a corner, the join is a diagonal, so a zero-sized box with three transparent borders leaves one visible triangle.
How it works
- Set width and height to zero, so the element has no content box at all.
- Give it borders on all the sides you need. Because there is no content, the borders meet in the middle.
- Make three of the four borders transparent. The one remaining border is a triangle.
- The triangle points away from the visible border: a solid bottom border makes a triangle pointing up.
The half-width control sets the two transparent side borders, so the triangle base is twice that value. The height control sets the visible border.
Examples
An upward triangle
Points
Up
Half-width
50px
Height
80px
Result
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #0c6249;
The base is 100px wide because the two side borders are 50px each. The solid bottom border produces a triangle pointing up.
A left-pointing arrow
Points
Left
Half-width
30px
Height
40px
Result
width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-right: 30px solid #0c6249;
For horizontal directions the transparent borders move to top and bottom, and the visible one is on the opposite side to the direction of the point.
Frequently asked questions
Why does a solid bottom border make a triangle that points up?
Because the visible border is the base of the shape and its outer edge is the widest part. The transparent left and right borders cut diagonals into it, leaving a wedge that narrows towards the top.
Can I put a border or shadow on a CSS triangle?
Not directly, because the triangle is itself made of borders. The usual workaround is a second, slightly larger triangle positioned behind it in the border colour. If you need a stroke, clip-path or an inline SVG is a better fit.
Should I use the border trick or clip-path now?
clip-path is cleaner and supports arbitrary shapes, and browser support is broad. The border trick is still worth knowing because it works everywhere without exception and needs no extra properties, useful in email HTML, where clip-path support is patchy.
How do I make an isosceles rather than a right-angled triangle?
Keep both transparent side borders equal, which this tool always does. A right-angled triangle comes from setting one side border to zero and leaving the other at full width.