CSS Triangle and Arrow Generator
Pure CSS triangles and tooltip arrows using borders or clip-path.
Use via API
Generate CSS for a triangle pointing in any of eight directions, as the classic border trick and as clip-path, plus a tooltip arrow for straight directions. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/css-triangle-generator
curl https://pithlab.com/api/v1/tools/css-triangle-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"direction":"down","width":24,"height":12,"color":"#0f766e"}'About the CSS Triangle Generator
Make pure CSS triangles and tooltip arrows in 8 directions. Set width, height and colour, preview live, and copy border-based CSS or a clip-path version.
How to use the CSS Triangle Generator
- Pick the direction the triangle should point. The four diagonal directions make right-angled corner triangles.
- Set the width and height in pixels and choose a colour.
- Check the live preview, then copy the border CSS, the clip-path CSS or, for the four straight directions, a ready-made tooltip arrow.
Examples
Input
down, 20 × 10, #333
Output
.triangle {
width: 0;
height: 0;
border-top: 10px solid #333333;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}Input
right, 30 × 40, tomato
Output
.triangle {
width: 30px;
height: 40px;
background: #ff6347;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}Input
up-left, 50 × 50, #2563eb
Output
.triangle {
width: 0;
height: 0;
border-top: 50px solid #2563eb;
border-right: 50px solid transparent;
}Frequently asked questions
How does the border triangle trick work?
An element with zero width and height is drawn entirely by its borders, and neighbouring borders meet on a diagonal. Make all but one border transparent and the remaining one shows as a triangle. Its border width sets the triangle's height.
Should I use borders or clip-path?
clip-path is easier to read, can take a gradient or image as the fill, and can be animated. The border version works in every browser ever made and needs no background, which is handy for ::before and ::after tooltip arrows.
How do I add an arrow to a tooltip or speech bubble?
Choose up, down, left or right and copy the tooltip CSS. It puts the triangle on a ::after pseudo-element positioned just outside the box, centred on that edge, in the same colour as the box.
Why does my triangle have a slightly blurry edge?
The diagonal is antialiased by the browser. Odd sizes split into half pixels for the side borders can make it a touch softer; even widths usually render crisper.