CSS Triangle Generator
Generate CSS triangles using the classic border trick — no images, no SVG. Pick direction, size and color.
CSS generated is free to use — no attribution required.
How do CSS triangles work?
The trick exploits how browsers join borders. Give an element width: 0; height: 0 and it has no content box at all, so its four borders meet each other directly — and where two borders meet, the browser cuts the seam at 45 degrees. Make three of those borders transparent and the fourth is left as a triangle.
That is the whole mechanism. The triangle is a border, which is why its size is set by border widths rather than by width and height.
What is the CSS triangle syntax?
For a triangle pointing up: border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid #6366f1. The colored border is the one opposite the direction the triangle points, which is the part that trips people up — the bottom border produces an upward triangle.
How do you point a triangle in each direction?
Move the color to the opposite side and make the other two transparent. Color the border-bottom to point up, border-top to point down, border-right to point left, and border-left to point right. In each case the two borders you keep transparent are the ones perpendicular to that axis, and their width sets how wide the base is.
How do you create diagonal corner triangles?
Corner triangles use two borders instead of three. For a triangle filling the top-right corner: border-top: 40px solid #6366f1; border-right: 40px solid transparent. With only two borders meeting, the single 45-degree seam becomes the hypotenuse, giving a right triangle rather than an isosceles one — which is what you want for ribbons and corner badges.
How do you control the size and proportions of a CSS triangle?
The two transparent borders set the half-base, and the colored border sets the height. So a triangle with 20px left and right borders has a 40px base, and its height is whatever you give the colored border.
That makes the common shapes easy to hit deliberately. For an isosceles triangle, just use equal transparent borders — any height. For a right triangle, drop one of the transparent borders to zero. For an equilateral triangle the height must be the half-base multiplied by the square root of 3, roughly 1.732 — so 20px side borders need a 35px colored border, not 40px.
What is the modern clip-path alternative to the border trick?
One declaration replaces the whole thing: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) on an element that has a real width and height. The three coordinate pairs are the apex, the bottom-left corner and the bottom-right corner, so changing the direction is a matter of moving points rather than reasoning about which border to color.
When should you use the border trick and when should you use clip-path?
Use clip-path whenever the triangle needs to be anything other than flat color. Because the element keeps a genuine box, you can give it a background gradient, a background image, or a transition — a border triangle can only ever be one solid color, since it is a border.
The border trick still earns its place for tiny decorative carets generated with ::before and ::after, where there is no content to clip and the technique is universally supported. It is also the only one of the two that works without the element having dimensions.
How do you add a shadow to a CSS triangle?
Not with box-shadow. The border box of a border-trick triangle is the full bounding rectangle, so box-shadow draws a rectangular shadow around a shape that looks triangular — a mismatch that is immediately visible.
Use filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)) instead. It works off the rendered alpha channel, so it traces the actual visible triangle. The same applies to clip-path triangles, where box-shadow is clipped away entirely along with everything else outside the polygon.
How do you use a CSS triangle as a tooltip or dropdown caret?
Attach it to a pseudo-element rather than adding markup. Give the tooltip position: relative, then add a ::after with content: "", position: absolute, and the border declarations for a downward triangle. Position it with top: 100% and left: 50%, then pull it back by half its base with a negative margin or a translate so it centers properly.
Match the colored border to the tooltip background rather than to its border color, and remember the caret does not inherit the parent background — if the tooltip background changes on hover, the caret needs the same rule.
Why does my CSS triangle look blurry or jagged?
Almost always subpixel rendering. Fractional border widths, a parent with a fractional position, or a transform that lands the element off the pixel grid all force the browser to antialias the 45-degree seam, and the diagonal edge is where that shows worst.
Use whole-pixel border widths, and check that no ancestor is nudging the element onto a half pixel. If the triangle is large or is being scaled or rotated, switch to clip-path — it antialiases the edge more cleanly than a border seam does.
What is the browser compatibility for CSS triangles?
The border technique has no compatibility story to speak of: it relies on border rendering that has behaved this way in every browser for as long as CSS has had borders, and it needs no prefixes. clip-path with polygon() is supported across all current browsers unprefixed, so both approaches are safe today — the choice between them is about what you need the triangle to do, not about support.