Advertisement
How CSS Triangles Work
CSS triangles use a clever border trick: a zero-width, zero-height element with three transparent borders and one colored border creates a perfect triangle shape.
The Border Trick Explained
- Set
width: 0; height: 0on the element - Add four
bordersides all set to the same width - Set three sides to
transparent - The remaining colored border forms the triangle pointing in the opposite direction
Example: Downward Arrow
border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 20px solid #333;- Result: triangle pointing down
Common Use Cases
- Tooltip arrows and speech bubble tails
- Dropdown caret indicators
- Decorative section dividers
- Progress step connectors
Why use CSS triangles instead of images?
CSS triangles are resolution-independent (sharp at any DPI), require no HTTP requests, can be colored with a single CSS variable, and are animatable with transitions. They're zero-maintenance compared to images.
Can I make isosceles or right-angle triangles?
Yes — control the shape by varying the two transparent border widths. Equal widths give an isosceles triangle; unequal widths skew it. For right-angle triangles, set one transparent border to zero.
Should I use CSS triangles or SVG?
For simple arrows and decorative shapes, CSS is simpler and faster. For complex shapes, custom paths, or triangles that need to be interactive, SVG is more flexible. Both are resolution-independent and faster than raster images.