CSS Triangle Generator

What this tool does

The CSS Triangle Generator produces a pure-CSS triangle using the long-standing border trick — no SVG, no image file and no clip-path. You choose a direction, a size and a colour, and the tool builds a complete CSS rule for a zero-size element whose borders form the triangle. A live preview shows the exact shape, and the rule is presented as copyable code. Everything is computed in your browser.

The technique relies on how browsers render where two borders meet. Give an element width: 0; height: 0 and thick borders, and each border is drawn as a triangle that meets its neighbours along a diagonal. Colour one border and make the adjacent ones transparent, and only that triangle is visible. It is a small trick with a big payoff: a crisp, resolution-independent shape that weighs nothing and inherits colour like any other border.

Use cases

The most common use is interface arrows. Tooltips, popovers and dropdown menus almost always have a little pointer connecting them to the control that opened them, and a CSS triangle is the standard way to draw it. Speech bubbles in chat UIs use a triangle for the tail. Accordions, select-style menus and “show more” toggles use a small caret that you can build here and rotate later. Beyond arrows, triangles appear as ribbon ends, as breadcrumb separators, as folded-corner effects on cards and as simple decorative accents in flat-design layouts. The eight directions — four sides and four corners — cover pointers, carets and right-angled corner wedges alike.

How to use it

1. Pick a direction. The four side directions (up, down, left, right) make a symmetric triangle that points at a flat edge; the four corner directions make a right-angled triangle that fills a corner.
2. Drag the Size slider to set how large the triangle is, in pixels. The preview resizes immediately.
3. Choose a colour with the native picker, or type a hex value into the text field — the two stay in sync, and an invalid hex is flagged.
4. Read the generated CSS — a complete .triangle rule listing only the borders that matter.
5. Click Copy CSS to copy the rule, then paste it into your stylesheet and rename the selector to suit your markup.
6. Use Reset to return to the defaults.

Tips

To attach a tooltip arrow, position the triangle element absolutely against the tooltip’s edge — for a tooltip above a button, use a downward triangle on the tooltip’s bottom edge so it points at the button. If you want the arrow colour to follow the tooltip’s background automatically, set the coloured border with currentColor and let the parent define the colour. For a thin caret rather than a solid wedge, draw two triangles or use a rotated square with two borders. Keep triangle sizes on a small, consistent scale across a project so every pointer and caret feels related. Remember the element has no content area — add padding or a wrapper if you need clickable space around the shape.

Related techniques

When you need a triangle that is part of a larger custom outline, or a shape with more than three sides, the Clip-Path Generator is the better tool — it can cut any polygon from an element. For rounded shapes and pill buttons, reach for the Border-Radius Generator instead. The border-triangle approach remains the lightest option for simple arrows and carets, and because its output is plain CSS it works in every framework, stylesheet and CSS-in-JS setup without any changes.