CSS Triangle Generator
Generate a pure-CSS triangle using the classic border trick.
The Border Trick
Shrink an element to zero width and height, make three of its borders transparent, and leave the fourth colored. Adjacent borders always meet along a diagonal, so what's left renders as a clean triangle with no extra markup.
How to read which border becomes the triangle's flat base
The intuition that makes this trick easy to remember: whichever border you leave colored becomes the triangle's flat edge, and the triangle points in the opposite direction, away from that colored side. A colored border-bottom with transparent left/right sides produces a triangle whose flat base sits at the bottom and whose point aims upward, which is exactly why this tool's "Up" direction sets border-bottom rather than something that might seem more intuitive like border-top. The two transparent borders occupy real space (transparent isn't the same as removed), they just don't render any visible color, and it's the diagonal seam where a transparent border meets the colored one that forms each of the triangle's slanted edges.
A real constraint: these triangles are always a fixed proportion
The two transparent side borders are always set to exactly half the size of the colored border (half = size / 2), which means the resulting triangle's base-to-height ratio is locked at roughly 1:1, it's always the same isoceles shape, just scaled larger or smaller by the Size slider. There's no way to independently stretch this into a tall, narrow arrow shape or a short, wide wedge using the border trick alone, since the geometry falls directly out of the border-width ratio rather than being a separately adjustable base and height. If you need an independently proportioned triangle, or one with rounded corners (which the border trick can't produce cleanly, since border-radius doesn't round the diagonal seams the same way it rounds a normal box), the Clip-Path Generator's triangle option gives you direct control over each vertex instead.
Why the border trick is still worth knowing despite clip-path existing
The border technique predates almost every other CSS shape-drawing method, it has worked reliably since Internet Explorer 6, decades before clip-path existed, and it still requires nothing more than a single empty <div> with no SVG, no extra markup, and no modern-browser feature dependency. For a small decorative pointer, dropdown arrow, or speech-bubble tail where legacy compatibility genuinely matters or where pulling in a whole separate technique feels like overkill for one small triangle, the border trick remains the simplest, most broadly compatible option available.
Why border-color needs to be set on the element, not the color property
It's a common early mistake to reach for the color property when trying to color a border-trick triangle, but color only affects text and a handful of other properties that explicitly inherit from it, it has no effect on border rendering. Every triangle here works purely through the individual border-top, border-right, border-bottom, and border-left shorthand declarations, each one bundling a width, a style (always solid here), and a color together. Getting the triangle's color right means editing the colored border's own color value directly, changing a separate color or background declaration on the same element won't touch it at all.
A practical use case: CSS-only dropdown arrows and tooltip pointers
Because this technique needs zero extra HTTP requests, no SVG markup, and scales cleanly to any pixel size just by changing the border widths, it's a common choice for small UI details like a dropdown menu's downward arrow, a custom select element's chevron replacement, or the small triangular pointer on a tooltip or popover that needs to visually connect back to whatever triggered it. These are typically implemented as a ::before or ::after pseudo-element on the parent component using this exact border pattern, absolutely positioned to sit at the edge where the pointer needs to appear, which avoids adding an extra empty element to the actual HTML markup.
Frequently Asked Questions
Which border should I make colored to point the triangle in a specific direction?
The colored border becomes the triangle's flat base, and the triangle points away from it. For example, a colored border-bottom with transparent left and right borders produces a triangle pointing upward, since the flat edge sits at the bottom.
Can I make a tall, narrow triangle or a short, wide one with this tool?
Not independently. The transparent side borders are always exactly half the colored border's size, which locks the triangle to a fixed roughly-1:1 base-to-height proportion at any scale. For independently adjustable proportions, use a clip-path-based triangle instead.
Why doesn't border-radius round the corners of a border-trick triangle?
border-radius rounds the corners of a normal box shape, but a border-trick triangle's diagonal edges come from where differently-colored borders meet, not from box corners in the usual sense, so applying border-radius doesn't cleanly round the triangle's point or base corners.
Is the border trick still relevant now that clip-path exists?
Yes, it requires no SVG or modern CSS feature, works in browsers going back to Internet Explorer 6, and needs only a single empty div. It's still a practical, simple choice for small decorative shapes like arrows or speech-bubble tails.
What's transparent actually doing in the CSS output?
The transparent side borders still occupy real space in the box model, they're just invisible. It's the diagonal seam where an invisible transparent border meets the visible colored border that creates each slanted edge of the triangle shape.
What should I use instead if I need a rounded-corner triangle?
Use the Clip-Path Generator's triangle option, which lets you define each vertex directly with polygon() coordinates and supports far more flexible shaping than the border trick, including proportions the border method can't produce.