100% offline
CSS
Free · no signup
Updated
CSS Triangle Generator
A CSS Triangle Generator produces the CSS for a triangle in any of eight directions using the transparent-border technique on a zero-size element — no images and no SVG.
80px
60px
CSS
.triangle {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #f59e0b;
}About CSS Triangle Generator
Pick a direction from the 3x3 pad — the four compass points or any corner — then set width, height, and color to get the exact border values. The classic trick gives a zero-width, zero-height box three transparent borders so the fourth renders as a triangle, still the lightest way to draw tooltip arrows, dropdown carets, and ribbon corners. Preview and CSS are generated locally.
What CSS Triangle Generator does
- Eight directions: four points plus all four corners
- Independent width and height for lopsided triangles
- Color picker with hex input
- Live preview of the exact CSS
- No images, SVG, or extra markup
- Copy-ready CSS generated in your browser
When to reach for CSS Triangle Generator
- Drawing the arrow on a tooltip or popover
- Adding a caret to a dropdown or select
- Creating a corner ribbon or folded-corner effect
- Building a breadcrumb chevron
How to use CSS Triangle Generator
- 01
Choose a direction
Click a cell on the direction pad.
- 02
Size and color it
Set width, height, and the fill color.
- 03
Copy the CSS
Paste the rule onto your element or pseudo-element.
When to use CSS Triangle Generator vs alternatives
| Alternative | Use CSS Triangle Generator when… | Use the alternative when… |
|---|---|---|
| An SVG triangle | you want zero extra markup and a shape driven entirely by CSS. | you need strokes, gradients, or curved edges. |
| clip-path | you want a shape that works on any pseudo-element with the widest support. | you need an arbitrary polygon or to clip real content. |
Frequently asked questions
How does the CSS border triangle trick work?
An element with zero width and height still paints its borders, and adjacent borders meet at a 45-degree diagonal. Make three borders transparent and the remaining one appears as a triangle.
How do I make a tooltip arrow?
Generate the direction you need, then apply the CSS to a ::before or ::after pseudo-element on the tooltip and position it absolutely against the edge.
Can I make a right-angled or lopsided triangle?
Yes. Pick a corner direction for a right-angled triangle, and set different width and height values to skew any triangle.
Should I use clip-path instead?
clip-path is more flexible for arbitrary polygons, but the border trick needs no clipping support, works on pseudo-elements everywhere, and is trivial to animate in size.