CSS Triangle Generator
Generate a pure-CSS triangle pointing in any of 8 directions — the classic zero-size border trick or a modern clip-path polygon — with your own width, height and color, plus the HTML snippet and an SVG preview. Runs entirely in your browser.
Input
Where the triangle points — the four cardinal directions, or a right-angled corner wedge.
Border works everywhere but leaves no content box; clip-path keeps a real box you can put a gradient on.
Used for the generated rule and the HTML snippet.
Output
Your triangle will appear here.
Guides
A triangle is one of the few shapes CSS has no primitive for. There is no shape: triangle, so you fake it — either by abusing how borders meet at a corner, or by clipping a rectangle down to three points. This generator writes both for you: pick a direction, set a width, height and color, and copy the finished rule.
How to use it
- Pick the direction the triangle points — up, down, left, right, or one of the four right-angled corner wedges (top-left, top-right, bottom-right, bottom-left).
- Choose a technique: the border trick or a
clip-pathpolygon (see below for which to pick). - Drag width and height until the preview looks right. Every direction is fully sizable, corners included.
- Set the color and, if you like, a class name — it's used in both the CSS rule and the HTML snippet.
- Copy the CSS and the
<div>snippet, or download the SVG preview if you'd rather ship an image.
Border trick or clip-path?
The border trick gives an element width: 0; height: 0 and a thick border. Because adjacent borders meet along a diagonal, each of the four border regions is itself a triangle — color one, make the other three transparent, and the visible result is a triangle. It works in every browser ever shipped, including email clients, which is why it's still the default.
Its cost is that there is no content box left. You can't put text or an icon inside the element, you can't give the triangle a gradient or a background image, and you can't animate its shape — only its border widths.
clip-path: polygon() keeps a real width × height box with a real background, then clips everything outside three points. That means the triangle can carry a gradient, a background image, or a box shadow (via filter: drop-shadow()), and the polygon itself can be transitioned. Support is universal in modern browsers but absent in legacy engines and unreliable in email.
Rule of thumb: clip-path for anything on a modern site, the border trick for maximum reach or for tiny decorative arrows where neither limitation matters.
What the numbers mean
For a cardinal triangle, width is the length of the base and height is the distance from the base to the apex. In the generated border rule that shows up as two half-widths on the sides (a 100px-wide upward triangle gets 0 50px 100px 50px).
For a corner wedge, width and height are the two legs of the right angle, and they map straight onto two border widths — no halving. That's also why corner wedges are sizable here even though some generators lock them to a square.
Does it run on my machine?
Yes. The rule, the HTML snippet and the SVG preview are all built in your browser — nothing is uploaded, and the tool works offline once the page has loaded.
Can I use this for a tooltip or dropdown arrow?
That's the classic use. Generate a small downward triangle (say 12 × 6), then position it with position: absolute against the tooltip body. Use the border technique here — the arrow is decorative, so the missing content box costs you nothing, and you get support everywhere.
What if I need a different shape?
For anything with more than three points — hexagons, stars, arrows, speech bubbles — use the CSS Clip-Path Generator, which builds arbitrary polygons and other clip shapes. To round the corners of a normal box instead, see the Border Radius Generator; to rotate or skew the triangle once you have it, the CSS Transform Generator writes the matching transform value.