Home / Design / CSS Triangle Generator
CSS Triangle Generator
Make a CSS triangle pointing any direction, at any size and colour.
Which method? The border trick works everywhere and is ideal for tooltip and dropdown arrows — the element has zero size and three borders, two of them transparent. clip-path is easier to read, can hold a background image or gradient, and keeps a real box size for layout.
About the CSS Triangle Generator
The CSS Triangle Generator makes triangles pointing in any of eight directions at any size and colour, using either the classic border trick or clip-path. Copy the CSS for tooltips, speech bubbles, dropdown arrows and decorative shapes — no images or SVG needed.
How to use the CSS Triangle Generator
- Choose the direction.
- Pick the border trick or clip-path method.
- Set the width, height and colour.
- Copy the CSS.
Frequently asked questions
How does the CSS border triangle trick work?
An element with zero width and height and thick borders is drawn as four triangles where the borders meet. Making three of them transparent leaves one triangle showing.
Should I use the border trick or clip-path?
clip-path is easier to read and supports backgrounds and gradients. The border trick works everywhere, including very old browsers.
How do I add a triangle to a tooltip?
Put the triangle in a ::before or ::after pseudo-element positioned at the edge of the tooltip.