About the CSS Triangle Generator
What is a CSS triangle generator?
There's no triangle in CSS. What there is, and what everyone uses, is a trick. Give an element no width and no height, then give it four thick borders. Where two borders meet they cut across at 45 degrees, so if three of them are transparent the fourth is left as a triangle. It works, it has worked since the 1990s, and it is completely unreadable if you come across it in a stylesheet without knowing what it is.
That's the case for a generator. Pick a direction, drag two sliders and the border values are worked out for you, with a preview so you can tell straight away whether the shape is the one you wanted.
This one covers four ways of doing it rather than only the classic. The border trick when you want maximum compatibility, clip-path when the shape needs a gradient or an image inside it, a caret built from two borders and a rotation for dropdown and back arrows, and a complete tooltip with the pointer already attached as a pseudo-element. That last one is what most people are really looking for when they search for a CSS arrow.
How to Use This Tool
- Choose the technique. Border trick for a plain triangle. clip-path if you want a gradient. Caret for a chevron. Tooltip if the triangle is a pointer on a bubble.
- Point it. The eight-way pad covers the four straight directions and the four corner shapes. A corner triangle fills half a rectangle diagonally.
- Size it. Width is the base, height is how far it sticks out. A base twice the height puts a right angle at the tip, a wider base gives you a flatter shape, and a narrower one gives you a spike.
- Copy both boxes. The CSS and, for the tooltip, the markup that goes with it.
Common Use Cases
Small triangles do a lot of quiet work in an interface, and most of them are one of these.
- Tooltip and popover pointers: the little tail that ties a bubble to whatever it's describing.
- Speech bubbles: the same idea in a chat thread, with the pointer on the left or right depending on who is talking.
- Dropdown carets: the small chevron beside a menu label, which the caret option builds from two borders so it stays crisp at any size.
- Breadcrumb arrows: a right-pointing triangle between steps, or a full chevron shape cut with clip-path.
- Ribbon and banner tails: the notched ends of a ribbon are two corner triangles.
- Angled section corners: a large corner triangle in the section color, sitting over the edge of the one below it.
Need something more complicated? The CSS Clip-Path Generator handles any polygon you can draw, the CSS Ribbon Generator builds the whole banner, and the CSS Separator Generator covers the shapes that sit between sections. Or browse all our free developer tools.
Frequently Asked Questions
Why does the border trick work?
Because borders meet at a diagonal. On a normal box you never notice, since the borders are thin and the content in the middle is what you look at. Shrink the box to nothing and the four borders become four triangles meeting at a point. Make three of them transparent and only one triangle is left. The width of the opposite border decides how tall it is, and the two side borders decide how wide.
Border trick or clip-path?
Border trick unless you need something it can't do. It's understood by every browser, costs nothing, and doesn't interfere with anything else on the element. Reach for clip-path when the triangle needs a gradient, a background image, or a shape more complicated than three points. The tradeoff is that a clipped element loses its box shadow and its outline, since both are painted outside the shape.
How do I put a border around the triangle itself?
You can't, not directly, because the shape is already made of borders. The usual answer is two stacked triangles, a slightly larger one in the border color underneath and a smaller one in the fill color on top, offset by a pixel or two. With clip-path there's a neater option, which is to put the shape on a parent with the border color and a slightly inset copy on a child.
Why is my triangle blurry on the diagonal?
Antialiasing on a diagonal edge, usually made worse by a fractional pixel size or a transform. Round the width and height to whole numbers, and if the element sits inside something that's been scaled or translated by a fraction, that's the cause. An SVG triangle renders more cleanly at large sizes, so for anything over about 100 pixels it's worth using one.
Can I animate a CSS triangle?
Yes, though not always cheaply. Animating border-width forces a layout on every frame, which is the slow path. Rotating or scaling with transform is much better, and it's how the caret option flips a chevron when a menu opens. Changing the color is cheap either way.
How do I position the tooltip pointer?
The generated rule already does it. The pseudo-element is pinned to the edge the pointer comes out of using bottom: 100% or its equivalent, then centered along that edge with a negative margin equal to half the base width. If you move the pointer off center, change that margin rather than the position, since the offset is what keeps it lined up when the bubble resizes.
Does the triangle affect layout?
The border version does, because the borders take up real space even though the box is zero by zero. That's why a triangle sitting next to text pushes it along. If you don't want it to, take it out of flow with position: absolute, which is what the tooltip version does. The clip-path version reserves its full rectangle, so the transparent corners still occupy space.