CSS Triangle & Arrow Generator
Pure-CSS triangles use a "hack" of thick transparent borders meeting at a point — no image, no clip-path. Rotate an arrow to any exact angle, or use a right-angle corner triangle for ribbons and badges, then preview it live against a tooltip box.
How the CSS triangle border trick works
An element with zero width and height has borders that meet at a single point in the middle. Making one border a solid color and the adjacent borders transparent leaves only the colored border visible as a triangle — the css arrow code behind tooltips, popovers, and chat bubbles. Building the base shape pointing up and rotating it with transform: rotate() lets it point at any exact angle, not just four fixed directions.
Using this as a tooltip arrow css tool
Toggle "preview with tooltip box" to see the arrow sitting against a real tooltip shape at the snapped angle, coloured to match, so you can judge the connection point before copying the code. Corner mode switches to the separate right-angle technique used for ribbon and badge corners, and either shape can be copied as an equivalent SVG polygon.
Worked example: an 80 by 70 upward triangle
With the default width of 80px and height of 70px, the generator writes:
.triangle-arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 70px 40px;
border-color: transparent transparent #a78bfa transparent;
transform: rotate(0deg);
}
The trick relies on how borders meet at the corners of a box with no width or height. border-width: 0 40px 70px 40px reads top, right, bottom, left. The bottom border is 70px deep and coloured, while the left and right borders are 40px wide and transparent. The coloured bottom border is cut diagonally by its neighbours into a triangle that is 80px wide (40 + 40) and 70px tall.
The visible triangle always comes from the border on the side opposite the point. For an upward triangle that's the bottom border, so you colour that one and leave the others transparent.
Which border to colour for each direction
| Points | Coloured border | border-width (top right bottom left) |
|---|---|---|
| Up | bottom | 0 W/2 H W/2 |
| Down | top | H W/2 0 W/2 |
| Left | right | W/2 H W/2 0 |
| Right | left | W/2 0 W/2 H |
Frequently asked questions
How does the CSS border-triangle trick actually work?
An element with zero width and height only shows its borders. Making three of the four border colors transparent and one solid leaves just that one triangular border wedge visible — that wedge is your triangle.
Can I make a triangle with a border or outline around it?
Not directly with the pure border technique, since the 'triangle' is itself made of borders. A common workaround is layering a second, slightly larger triangle in a different color directly behind the first to fake an outline.
Why does my triangle look pixelated at large sizes?
CSS border triangles are vector shapes rendered by the browser, so they shouldn't pixelate — if edges look rough, it's more likely a screen scaling or zoom rendering artifact than the technique itself. For a perfectly crisp large shape at any zoom, an SVG polygon is a more reliable alternative.
Can this technique make other polygon shapes, like a pentagon?
Not on its own — the border trick is limited to triangles because a box only has four border edges to work with. For arrows, stars, or other polygons, clip-path (see the Clip-Path Generator) is the better tool.
