# CSS Triangle Generator

Canonical URL: https://offlineutils.com/css-triangle-generator
Category: CSS
Published: 2026-07-20
Publisher: offlineutils.com
Runs entirely in the browser; nothing entered into the tool is uploaded.

> A CSS Triangle Generator produces the CSS for a triangle in any of eight directions using the transparent-border technique on a zero-size element — no images and no SVG.

Pick a direction from the 3x3 pad — the four compass points or any corner — then set width, height, and color to get the exact border values. The classic trick gives a zero-width, zero-height box three transparent borders so the fourth renders as a triangle, still the lightest way to draw tooltip arrows, dropdown carets, and ribbon corners. Preview and CSS are generated locally.

## Features

- Eight directions: four points plus all four corners
- Independent width and height for lopsided triangles
- Color picker with hex input
- Live preview of the exact CSS
- No images, SVG, or extra markup
- Copy-ready CSS generated in your browser

## Use cases

- Drawing the arrow on a tooltip or popover
- Adding a caret to a dropdown or select
- Creating a corner ribbon or folded-corner effect
- Building a breadcrumb chevron

## How to use it

1. **Choose a direction** — Click a cell on the direction pad.
2. **Size and color it** — Set width, height, and the fill color.
3. **Copy the CSS** — Paste the rule onto your element or pseudo-element.

## When to use it, and when to use something else

- **vs An SVG triangle** — use CSS Triangle Generator when you want zero extra markup and a shape driven entirely by CSS. Use An SVG triangle when you need strokes, gradients, or curved edges.
- **vs clip-path** — use CSS Triangle Generator when you want a shape that works on any pseudo-element with the widest support. Use clip-path when you need an arbitrary polygon or to clip real content.

## Frequently asked questions

### How does the CSS border triangle trick work?

An element with zero width and height still paints its borders, and adjacent borders meet at a 45-degree diagonal. Make three borders transparent and the remaining one appears as a triangle.

### How do I make a tooltip arrow?

Generate the direction you need, then apply the CSS to a ::before or ::after pseudo-element on the tooltip and position it absolutely against the edge.

### Can I make a right-angled or lopsided triangle?

Yes. Pick a corner direction for a right-angled triangle, and set different width and height values to skew any triangle.

### Should I use clip-path instead?

clip-path is more flexible for arbitrary polygons, but the border trick needs no clipping support, works on pseudo-elements everywhere, and is trivial to animate in size.

## Related tools

- https://offlineutils.com/clip-path-generator
- https://offlineutils.com/background-pattern-generator
- https://offlineutils.com/border-radius-generator