CSS Triangle Generator
Build a triangle or arrow in pure CSS using the classic border trick — no images or SVG. Pick a direction, set the width, height, and color, then copy ready-to-paste code for tooltips, carets, dropdown arrows, and ribbons.
Direction
Presets
Size & Color
CSS Code
How CSS Triangles Work: The Border Trick
CSS has no native "triangle" shape, yet triangles are everywhere — dropdown carets, tooltip pointers, ribbon ends, play buttons, and accordion arrows. The trick that powers nearly all of them is clever use of borders on a zero-size element.
Why It Works
When an element has width: 0 and height: 0, its four borders meet at the centre point and each border becomes a triangle wedge. Where two borders meet, they form a diagonal seam. If you make three of the four borders transparent and give the fourth a solid colour, only that one wedge is visible — and it's a perfect triangle. The direction the triangle points is the opposite of the coloured border: a coloured bottom border points up.
The Four Cardinal Directions
- Points up — transparent left and right borders, a coloured bottom border. The left/right widths are half the base; the bottom width is the height.
- Points down — transparent left and right borders, a coloured top border.
- Points left — transparent top and bottom borders, a coloured right border.
- Points right — transparent top and bottom borders, a coloured left border.
Right-Angle & Corner Triangles
Using only two borders instead of three produces a right-angled triangle that fills a corner — ideal for ribbon flags and folded-corner effects. For example, a coloured top border plus a transparent right border yields a triangle anchored in the top-left corner. The four diagonal directions in this generator output exactly these two-border shapes.
Common Uses & Tips
- Tooltip & popover arrows — position the triangle with
::before/::afterpseudo-elements so the pointer sticks to the bubble. - Dropdown carets — a small downward triangle signals an expandable menu.
- Play buttons — a right-pointing triangle inside a circle.
- Ribbons & tags — corner triangles create the notched ends of price tags and banners.
Because the shape is built from borders, you can't apply border-radius to soften the tip — reach for clip-path if you need rounded or more complex polygons instead. For crisp edges on high-DPI screens, keep the pixel values whole numbers.
Frequently Asked Questions
width: 0; height: 0; and set three of its four borders to transparent with the fourth a solid colour. The visible border wedge forms a triangle. This generator writes that code for you in any of eight directions.::before or ::after pseudo-element of your tooltip with absolute positioning so the point touches the bubble. Match the triangle colour to the tooltip background.border-radius has no effect on it. For rounded or more complex shapes, use a clip-path: polygon() instead, which our clip-path generator can build.