CSS Triangle Generator

The CSS Triangle Generator builds the markup-free triangles that power tooltips, dropdown carets, ribbons and speech-bubble tails — all using the classic border technique with no images or SVG.

Choose a direction (up, down, left or right), set the width and height in pixels, and pick a fill colour; the tool produces the exact CSS and renders a live preview so you can see the shape before you paste it into your stylesheet.

The border trick works by giving an element zero width and height, then assigning a thick coloured border on the side opposite the point and transparent borders on the two adjacent sides.

The arithmetic — half the width on the perpendicular borders, the full height on the pointing border — is fiddly to get right by hand and easy to mix up between directions.

This generator handles it for you and keeps the proportions correct whatever dimensions you enter.

The output is plain, framework-agnostic CSS you can drop into any rule or pseudo-element such as ::before.

Everything runs locally in your browser, so nothing you enter is uploaded, and the tool keeps working offline once the page has loaded.