CSS Triangle Generator

Pick a direction, size and colour, see the triangle render live, and copy the pure-CSS border-trick code. It runs in your browser.

This css triangle generator builds a pure css triangle with the classic border trick: an element with zero width and height and thick transparent borders shows a solid wedge on one side. Choose one of eight directions, set the size and colour, and the preview draws it instantly. The copied code is plain triangle shape css with no images or SVG, so it scales cleanly and inherits colour easily. Used for tooltip carets, dropdown markers or a css arrow generator, it saves you from re-deriving which borders to make transparent every time.

Direction
CSS
.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #6d28d9;
}

How it works

  1. 1

    Pick a direction

    Choose from the eight-way pad: up, down, left, right or any corner. The preview points the triangle that way at once.

  2. 2

    Set size and colour

    Drag the size slider to scale the triangle and pick a colour. Everything updates live so you can match a caret or arrow exactly.

  3. 3

    Copy the CSS

    The generated .triangle rule uses the border trick. Copy it and apply the class to an empty element.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

How does a CSS triangle actually work?
An element with width and height 0 shows only its borders. Make three borders transparent and one solid, and the solid border collapses into a triangle. This pure css triangle needs no image at all.
How do I make a tooltip or dropdown caret?
Pick the direction that points toward the anchor, set a small size, and position the element with CSS. The triangle shape css from this tool drops straight into a ::before or ::after pseudo-element.
Can I make a right-angled corner arrow?
Yes. The four corner directions use only two borders to produce a right-angled wedge, which is common for ribbons and folded-corner effects. Select a corner and the css arrow generator writes the two-border version.
How do I change the triangle’s colour later?
The colour lives on the solid border, so update that border-color value. Because it is border-based, it inherits and transitions like any other border colour.
Why use borders instead of an SVG or image?
The border trick is a single element with no extra requests, scales without blurring, and is easy to recolour. For a simple caret it is lighter than shipping an SVG.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.