Zero dimensions, four borders, one visible triangle
A downward 24px blue (#3B82F6) triangle generates: width: 0; height: 0; border-style: solid; border-width: 24px 24px 0 24px; border-color: #3B82F6 transparent transparent transparent;.
This is the classic CSS border-triangle trick: setting both width and height to 0 leaves only the borders visible, and each border meets its neighbors at a 45-degree diagonal -- by making three of the four border colors transparent and only the bottom (or in this case, top-facing, since the visible border is the first of the four) colored, only that one triangular border wedge shows.
The border-width order (24px 24px 0 24px, following CSS's top/right/bottom/left convention) determines the triangle's direction -- a 0 in the bottom position with color on top produces a downward-pointing triangle here, while moving which side gets the 0 and the color changes which direction the triangle points.
Why this technique has real limitations
Zero-box border triangle. Not an SVG polygon. Border-triangles are a clever CSS hack built on how browsers render border corners, not a purpose-built shape primitive -- they can be finicky to size precisely, don't scale as cleanly as a vector shape, and can't easily support features like a stroke outline or a gradient fill the way an actual SVG polygon can.
Only solid, flat-colored triangles work well with this technique -- if a triangle needs a border/outline itself, a shadow, or a gradient fill, an SVG polygon or clip-path approach is generally the more capable choice.
This produces one triangle shape at a fixed size and direction -- rotating, flipping, or combining multiple triangles into a more complex shape would require additional transforms or multiple elements layered together.
When an SVG shape is the better tool instead
For a shape that needs to scale cleanly, take a stroke or gradient, or be part of a larger icon system, building it as an actual SVG path is more flexible than the border trick -- the SVG Path Optimizer and SVG viewBox Calculator support that direction.
For decorative background shapes rather than a small UI triangle, the SVG Wave Divider Generator covers a related but more elaborate shape need.
Frequently Asked Questions (FAQ)
Why does setting width and height to 0 make a triangle appear?
With no box content, only the borders render. Browsers draw border corners as diagonal miters, so when three of the four border colors are set to transparent and only one is colored, that one border's diagonal wedge is the only visible shape -- forming a triangle.
How does the border-width order control which direction the triangle points?
CSS border-width follows a top/right/bottom/left order. Putting 0 in one position and the visible size in the others changes which side has no border thickness, which determines which direction the resulting triangle points -- a 0 on the bottom (paired with color on top) points the triangle downward, as in this example.
Can this technique create a triangle with an outline or gradient fill?
Zero-box border triangle. Not an SVG polygon. Not easily. Since the 'shape' is actually border rendering rather than a real fillable shape, adding a stroke outline or gradient fill doesn't work the way it would on an actual SVG polygon or shape element.
Is this the best way to make a triangle for a logo or icon?
For a simple, flat UI accent (like a dropdown caret), yes, it's lightweight and CSS-only. For anything that needs to scale precisely, support a gradient, or be part of a larger icon system, an SVG-based triangle is more flexible and appropriate.
Can I combine multiple border-triangles into a more complex shape?
It's possible with multiple positioned elements and transforms, but it gets unwieldy quickly -- for anything beyond a single simple triangle, building the shape directly in SVG is generally more maintainable.
