CSS Triangle & Tooltip Arrow Generator

Speech bubbles, dropdown carets, breadcrumb arrows and tooltip pointers all need a small triangle, and reaching for an image or an icon font for it is overkill. CSS can draw one with no assets at all, in two ways. This page generates both, for eight directions, plus a ready tooltip with an arrow, so you can paste the rule straight into a stylesheet.

The border method

Give an element a width and height of zero and the borders around its empty box meet at the corners in diagonal joins. Each border is a trapezoid that collapses to a triangle when the box has no size. Make three borders transparent, give one a colour, and only that triangle shows. For a downward arrow of 40 by 24 pixels the page writes border-left: 20px solid transparent;, border-right: 20px solid transparent; and border-top: 24px solid #ef4f2b;. The side borders are half the width each, the coloured border is the height. The arrow points away from the coloured border, which is why a border-top makes it point down.

A worked example

Press Sample for exactly that red down arrow: direction down, width 40, height 24, colour #ef4f2b, border method. Switch the method to clip-path and the same shape is written as width: 40px; height: 24px; background: #ef4f2b; clip-path: polygon(0 0, 100% 0, 50% 100%);. The polygon lists the top left, the top right and the bottom middle. The two versions look the same on screen. A diagonal direction needs only two borders: an up-left corner at 60 by 40 is border-top: 40px solid #6366f1; with border-right: 60px solid transparent;.

Choosing a method

Borders work in every browser and take no extra layout, but the element has no real size, so a gradient background, an image or text cannot fill it. Clip-path keeps a normal box, so it can have a gradient or a pattern and its dimensions are plain width and height. It cuts the element’s drawing, so a box-shadow or a border outside the shape is clipped away too; for a shadow, wrap the element and use filter: drop-shadow() on the wrapper.

Tooltip arrows

Switch to the Tooltip arrow tab. The box gets position: relative, and the arrow is a ::after pseudo-element with position: absolute, a border of the chosen size and a single coloured side. With the arrow on the bottom edge and a size of 8 the page writes top: 100%; left: 50%; margin-left: -8px; and border-color: #1f2937 transparent transparent transparent;. The negative margin pulls the arrow back by its own half width so that it is centred on the chosen point; the position slider moves that point along the edge between 5% and 95%.

Edge cases

Triangles blur slightly on fractional device pixels, so choose even widths when the arrow has to be crisp. A tooltip arrow needs a box with an explicit background; the page uses the same colour for both so the pointer appears to grow out of the box. If the tooltip sits on a border, add the border to the arrow as a second, slightly larger triangle behind it.

Limits

The page generates the shapes and the pointer geometry. It does not position the tooltip near its target, choose the side automatically when it runs out of room, or handle focus and hover, which belong to your script. Everything is created in your browser.

Related tools

• CSS clip-path Generator draws any polygon, not only triangles.
• Box Shadow Generator gives the tooltip body its shadow.
• Border Radius Generator rounds the bubble.
• SVG Bezier Curve Editor makes arrows with curved edges.