The short version
You don’t need an image, an SVG, or a font glyph to draw a triangle on a web page. A single empty div with the right border values does it. Pick a direction up top, drag the two sliders, choose a color, and the code on the right is ready to paste. The preview sits on a checkerboard so the see-through parts of the shape actually look see-through.
Why borders make a triangle
Here’s the part that trips people up the first time they see it.
When a box has zero width and zero height, there’s no content area left. So all four borders collapse toward the same center point. And where two borders meet at a corner, the browser cuts the seam at a 45-degree miter, the same diagonal join you’d see on a picture frame. Each border ends up as a trapezoid (or a triangle once the box has no size).
Make three of those borders transparent and color just one, and the colored border reads as a clean triangle. The point sits opposite the colored side. Color the bottom border, get an arrow pointing up. Color the left border, it points right.
.triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 50px solid #7C3AED;
}That border-bottom is the visible wedge. The left and right transparent borders carve its slanted sides. Width here controls how wide the base is (left plus right), and height controls how far the tip reaches.
Cardinal vs diagonal
The four straight directions (up, down, left, right) use three borders: two transparent, one colored. That’s the classic version above.
The four diagonal directions (top-left, top-right, and so on) are simpler. They use only two adjacent borders, one transparent and one colored, which produces a right-angle triangle that hugs a corner. Handy for ribbon corners and folded-page effects.
This generator switches between the two automatically based on which direction button you press, so you never have to remember which case you’re in.
Where you’d actually use this
Tooltips. The little arrow poking out of a tooltip bubble toward the thing it describes is almost always a border triangle, positioned absolutely against the bubble.
Dropdown carets. That tiny downward chevron next to a select-style button. A 5px border triangle is sharper at small sizes than most icon fonts.
Beyond those: speech-bubble tails, custom <details> markers, breadcrumb separators, the notch on a popover, and the folded corner on a “new” badge. Once you spot the pattern you see it everywhere.
A few things worth knowing
The triangle is just a border, so background, box-shadow, and border-radius won’t behave the way you might expect on it. To soften the tip you usually fake it with a second, slightly offset triangle behind the first.
Color it with currentColor instead of a fixed hex and the triangle inherits the text color of its parent. Great for tooltip arrows that should match whatever theme the bubble uses.
For a triangle that has to scale fluidly or rotate at odd angles, reach for clip-path: polygon(...) or an inline SVG instead. The border trick shines at fixed-size UI bits, not responsive artwork.
Questions people ask
Why set width and height to zero?
Without a content box, the four borders have nothing to wrap around, so they meet at the center and each one becomes a triangle. Give the element any real size and you’d get four trapezoids framing a rectangle instead.
Can I make an equilateral triangle?
Pretty close. Set the height to roughly 1.73 times the half-base (that’s the square root of 3). So for a 60px base, use about 52px of height. It won’t be pixel-perfect because of rounding, but no one will notice.
How do I rotate the triangle to an in-between angle?
Wrap it and apply transform: rotate(...). The border trick only gives you the eight directions here; CSS transforms cover everything between them.
Does this work in old browsers?
Yep. The border technique predates flexbox and grid by years and runs fine all the way back to old IE. It’s about as safe as CSS gets.
Why is my triangle invisible?
Almost always one of two things: you forgot to set width: 0; height: 0, or the colored border and the background are the same color. Drop it on a contrasting surface and check the color value.
Should I use this or an SVG?
For a fixed arrow or caret in your UI, the border triangle is lighter and needs no extra markup. For anything that scales, animates its shape, or needs a gradient fill, SVG is the better call.