CSS Triangle Generator
Generate CSS triangles in any direction using the border hack. Pick direction, size, and color — get ready-to-use CSS code instantly. Free online tool.
- Runs in your browser
- Your data never leaves your browser
- Free · No Sign-Up
Scan with WeChat to share this tool
Examples, details and FAQ Worked examples, how it compares with other tools, and answers to common questions.
Understanding the Generated CSS
The generated rule always starts with width: 0 and height: 0.
For cardinal directions (top, right, bottom, left), two transparent borders define the base width
and one solid border defines the height of the triangle.
For corner directions (e.g. top-left), one solid border and one transparent border
form a right-angle triangle from a corner.
Paste the output into your stylesheet and rename .triangle to your own class.
Example: the Default Triangle
The tool opens with direction top, width 100, height 100 and color #3b82f6:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;
}The element has no content box, so its whole 100 × 100px box is border. The bottom border is a trapezoid whose top edge has shrunk to a point, and the two transparent side borders cut away the corners next to it. Because the side borders are half the width each, the tip sits in the middle.
Example: a Tooltip Arrow
Choose bottom, width 16, height 8, and the tooltip’s background color, for example #111827:
.triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #111827;
}To attach it, use the arrow as a pseudo-element of the tooltip instead of an extra div: copy the declarations into .tooltip::after, add content: "", position: absolute, top: 100%, left: 50% and margin-left: -8px (half the width), and give .tooltip position: relative.
Limits
- Odd widths put the tip half a pixel off centre. For top and bottom triangles the width is split into two side borders that add up to it exactly: width 25 gives 12px and 13px, so the base is 25px and the tip sits 0.5px to the left of the middle. The same applies to the height of left and right triangles. Writing 12.5px on both sides would not help: browsers round border widths down to whole device pixels (CSS Backgrounds and Borders Level 3), so on a standard screen that base would be 24px. Use even numbers when the tip must be centred.
- Solid color only. A border has one color, so there is no gradient, image fill, outline or
box-shadowthat follows the slanted edges. For those, cut the shape withclip-path: polygon(50% 0, 100% 100%, 0 100%)in the clip-path generator. - Whole pixels from 1 to 500. An empty field, 0, a negative number, a fraction or a value above 500 shows an error under Generated CSS and clears the CSS and the preview until the value is valid again.
- Pixel sizes only. Border widths cannot be percentages, so the border trick does not scale with its container.
- Hex colors only. The text field accepts a 6-digit code with
#; other text (3-digit or 8-digit codes, color names,rgba()) keeps the previous color and shows a hint. Edit the copied CSS to usecurrentColoror a custom property. - The HTML snippet is always
<div class="triangle"></div>. A triangle drawn only for decoration carries no meaning for screen readers; if it is the only sign of state (for example an expand caret), put that state in text oraria-expandedas well.
Common Use Cases
CSS triangles are used as tooltip arrows, dropdown caret indicators, decorative section dividers, breadcrumb separators, and speech-bubble tails. Because they are pure CSS with no images, they load instantly and are easy to theme with CSS variables.
FAQ
How does the CSS triangle trick work?
CSS triangles are created by setting an element's width and height to 0 and using borders to form the shape. When adjacent borders meet at transparent angles they create visible triangle shapes. For example, a transparent left and right border with a solid bottom border produces an upward-pointing triangle.
Why is the tip half a pixel off centre?
The tool writes border widths in whole pixels, and for top and bottom triangles the two transparent side borders must add up to the width, so an odd width cannot be split evenly. The smaller half comes first: width 25 gives 12px + 13px, the base stays 25px and the tip sits 0.5px left of the middle. Left and right triangles split the height the same way. Writing 12.5px on both sides does not fix it on a standard screen, where browsers round border widths down to whole device pixels and the base would become 24px. Use an even number when the tip must be exactly centred.
What do width and height control for each direction?
For top and bottom triangles, width sets the full horizontal span and height sets how tall the triangle is. For left and right triangles, width sets how wide the triangle extends and height sets the full vertical span. For corner triangles (e.g. top-left), width and height set the two sides of the corner rectangle from which the triangle is cut, so 16 × 10 gives a right triangle with a 16px side and a 10px side.
Should I use the border trick, clip-path or SVG?
The border trick needs no assets and works everywhere, but it can only be one solid color. clip-path: polygon() cuts any element, so the triangle can have a gradient or image fill and can scale with percentage sizes. SVG suits shapes with a stroke, rounded corners, or more than three points. For a small solid tooltip arrow or caret, the border trick is the shortest.
Can I use CSS triangles in dark mode?
Yes. Because the triangle is formed by borders, you can override the border color with a CSS custom property or a dark-mode media query. For example, use a CSS variable as the color value so it automatically flips between light and dark themes.
Are the size and color I enter sent or saved anywhere?
No. The CSS is built in your browser tab; the direction, size and color are not sent to a server and are not saved in browser storage. The page's analytics records a usage event with the tool name and the action, not the size or color.