A CSS triangle generator writes the border trick for you: an element with no width, no height, and three or four borders where only one carries a colour. The result is a solid triangle rendered by the browser's own border-joining behaviour, with no image, no icon font, and no extra request.
The technique is decades old and still the most compatible way to draw an arrow in CSS, which is why it appears in tooltips, dropdown carets, speech bubbles, and ribbon ends across most of the web. Arb Digital built this generator because the property values are counter-intuitive enough that most people copy a snippet, need it pointing the other way, and cannot work out which number to change.
What This CSS Triangle Generator Does
Choose a direction, base width, height, and colour, and the tool outputs a complete CSS rule with the correct border widths and the transparent sides already set. The preview renders the exact shape the rule produces, updated as you type, so there is no reload cycle.
The result panel reports what the browser is actually doing: the border-width shorthand, the size of the element box itself, the apex angle in degrees, and how many border sides are transparent. The apex angle is the figure that matters visually — it is what makes an arrow look sharp or blunt, and it is derived from the ratio of base to height rather than from either alone.
A clip-path version is generated alongside. It draws the same shape from a polygon and is far easier to read, at the cost of not working in very old browsers.
How to Use It
- Pick the direction the point should face. Four edge directions and four corner variants are available.
- Set the base width and height. Base is the flat edge; height is the distance from that edge to the point.
- Choose a colour. Only one border side takes it; the rest stay transparent.
- Name the selector so the generated rule drops into your stylesheet without editing.
- Copy the CSS. Apply it to an empty element, or adapt it into a pseudo-element as described below.
The Formula / How It's Calculated
Where two borders of different colours meet at a corner, the browser draws a diagonal join between them — this is what produces a mitred corner on a thick bordered box. The triangle trick exploits that join. Collapse the element to zero width and height and the borders have nothing to surround, so all four meet at a single point and each becomes a triangle in its own right.
Colour one and make the others transparent, and only that one triangle is visible. For an upward-pointing triangle, the bottom border carries the colour and the left and right borders are transparent; the top border is set to zero because it contributes nothing and would only add invisible height. The left and right borders are each half the base width, and the coloured bottom border equals the full height.
The border properties themselves are defined in the W3C CSS backgrounds and borders module, including the corner-joining behaviour the whole technique depends on. The apex angle follows from trigonometry: it is twice the arctangent of half the base divided by the height. A 60-pixel base on a 40-pixel height gives roughly 74 degrees. A base exactly twice the height produces a 90-degree point, while equal base and height give a much sharper 53 degrees — so a crisp arrow needs height well above half the base.
Why the Coloured Border Faces the Opposite Way
This is the part everyone gets wrong, and it follows directly from the geometry. To make a triangle point up, you colour the bottom border. The bottom border's outer edge is the flat base of the shape and its inner edge collapsed to a point at the top, so the visible wedge is widest at the bottom and tapers upward.
Once the reason is clear the rule is easy to remember: the coloured border sits on the side away from the point, and its width sets the triangle's height. The two borders adjacent to it are transparent and set the base width between them. The border directly opposite the coloured one is set to zero.
Corner triangles work slightly differently. There, two adjacent borders are coloured — or rather, one coloured and one at zero — producing a right-angled triangle that fills a corner. These are what ribbon and folded-corner effects are built from.
Use a Pseudo-Element, Not an Empty Div
A triangle almost never needs its own element in the markup. It is decoration, and decoration belongs in ::before or ::after on the element it decorates. That keeps HTML free of empty elements that mean nothing to a screen reader and would otherwise need hiding from the accessibility tree.
The pattern is standard: give the parent position: relative, give the pseudo-element content: "" — which is required or nothing renders at all — set position: absolute, then position it with top, left, or their logical equivalents. For a tooltip arrow, positioning it at the parent's edge and offsetting by exactly the triangle's height makes the point sit flush against the box.
One frequent trap: a pseudo-element inherits nothing about the border trick automatically, so the zero width and height must be stated. If your triangle renders as a coloured rectangle, the element almost certainly has a non-zero width or height from a layout rule elsewhere.
Border Triangles Versus clip-path
The clip-path approach draws the same shape by clipping a normal, sized element to a polygon: three coordinate pairs, one per corner. It is dramatically more readable — a reader can see that the shape is a triangle without knowing any trick — and it extends to any polygon you like, whereas the border method draws triangles and nothing else.
The advantages of the border method are compatibility and behaviour. It works in every browser that has ever supported CSS borders, and it does not clip anything, so it is unaffected by overflow rules on ancestors. Clip-path is well supported in current browsers but genuinely absent in old ones, and it clips the element's box shadow along with the element, which occasionally surprises people building tooltips.
For new work with no legacy requirement, clip-path is the clearer choice, and both are documented in the W3C CSS Shapes specification and the border sections of the CSS backgrounds module. This tool emits both so you can decide per project.
Anti-Aliasing, Half-Pixels, and Fuzzy Edges
A diagonal edge on a pixel grid has to be anti-aliased, so the sloped sides of a border triangle are never perfectly crisp. On standard-density displays this can look slightly soft, and on some browser and zoom combinations a faint seam appears where two borders meet.
Two practical mitigations help. Use whole-pixel border widths where possible — fractional widths land on half-pixels and increase blur. And prefer even numbers for the base width, because the two transparent borders are each half the base; an odd base means each side takes a fractional value and the shape may render one pixel wider on one side than the other. Neither problem exists with clip-path, which is another point in its favour for large triangles.
Making a Triangle Accessible
A triangle drawn in CSS is invisible to assistive technology, which is usually correct — a dropdown caret is decoration, and the button already carries the label. Problems arise when the triangle is the only indication of state, such as an accordion that shows direction purely through a rotating arrow.
In that case the state belongs in the markup, through aria-expanded on the control, with the triangle as visual reinforcement rather than the source of truth. The same applies to sort indicators in tables and to required-field markers. If removing every CSS triangle from the page would leave a user unable to tell what state something is in, the information is in the wrong place.
Arb Digital's web development team builds component libraries with consistent styling, accessible states, and CSS that stays maintainable as the site grows.
Web Development Services Talk to Arb DigitalCommon Mistakes to Avoid
- Giving the element a width or height. A border triangle must be zero by zero, or the borders surround a box and stop meeting at a point.
- Colouring the border on the side the point faces. The coloured border sits opposite the point, and its width is the triangle's height.
- Forgetting
content: ""on a pseudo-element. Without it nothing renders at all, however correct the borders are. - Using odd base widths. Each transparent border takes half, so odd values land on half-pixels and blur the edges.
- Relying on the arrow alone to convey state. Expanded and collapsed states need markup attributes, not just a rotated triangle.
Related Free Tools From Arb Digital
Round the shapes around it with the border radius generator, add depth using the box shadow generator, fill backgrounds with the CSS gradient generator, position components using the CSS flexbox generator, animate the result with the CSS animation generator, and ship it smaller through the CSS minifier. Everything else is in the free online tools hub.
Frequently Asked Questions
An element with zero width and height has all four borders meeting at a single point, so each border renders as a triangle. Colouring one and making the others transparent leaves a single visible triangle.
The bottom one. Its outer edge forms the flat base and it tapers to a point at the top, so the coloured border always sits opposite the direction the point faces.
The element has a width or height applied. The border trick only works when the content box is zero by zero, so a layout rule elsewhere is probably setting a size.
For new projects it is easier to read and extends to any polygon. The border method remains useful for maximum compatibility and when an ancestor's overflow or clipping behaviour causes problems.
Use a before or after pseudo-element on the parent, with content set to an empty string, absolute positioning, and the same border rules.
It is twice the arctangent of half the base width divided by the height. Increasing height relative to base makes the point sharper.
Not directly, because the shape is made from borders. The usual approach is layering a slightly larger triangle in the outline colour behind a smaller one in the fill colour.
Rendering of diagonal edges depends on the browser and display density, so check the result at the zoom levels and screen sizes your visitors use.
