LocalToolsOffline browser tools collection

Category: Developer tools

CSS Triangle Generator

System ideaMissing a tool?

Build a pure-CSS triangle with the border trick

Pick a direction, size and colour to build a zero-size box with coloured borders that renders as a triangle, with a live preview and the CSS declaration ready to copy. Everything is computed in your browser.

Output
width: 0;
height: 0;
border-right: 80px solid transparent;
border-bottom: 80px solid #0f7b63;
border-left: 80px solid transparent;

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A CSS triangle is a `width: 0; height: 0;` box whose borders are given a colour on one side and made transparent on the two beside it, so only the colored border's wedge shows. It is easy to get backwards by hand — the wrong pair of sides, or a border left solid instead of transparent — so this tool builds the four declarations from a direction, a size and a colour and shows the result on a real box as you change them.

How to use it

  1. Pick a direction: up, down, left or right.
  2. Set the size and the colour.
  3. Copy the border declarations into your stylesheet.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Is anything sent to a server?
No. The preview is a real CSS border rendered by your browser, and the declaration is text assembled in the page.
Why does the triangle need width and height set to 0?
The border trick relies on the borders meeting at a point rather than framing a box. A non-zero width or height would flatten the wedge into a trapezoid.
Can I use this for an arrow on a tooltip or speech bubble?
Yes — that is the most common use. Position the triangle absolutely against the edge of the tooltip and match its colour to the tooltip's background.

Back to all tools