CSS Triangle Generator

Generate CSS triangles using border tricks with direction, size, and color customization options.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Triangle Generator does and how it behaves

The visible triangle is not a polygon or clipped box. CSS Triangle Generator builds it from borders meeting around an element whose content width and height are zero. Direction determines which border wedge is colored, size controls determine the wedge dimensions, and color sets the visible fill. The usual surprise is the directional mapping: an upward-pointing triangle comes from a colored bottom border because that wedge extends below its central tip.

How the result is produced

Border geometry

With width and height set to zero, each nonzero border becomes a wedge that tapers to the box center. The generator leaves the appropriate wedge visible and makes its neighboring wedges transparent. The visible border width is the distance from tip to base, while the two adjacent border widths add together to form the base span.

Direction mapping

In CSS, border-bottom occupies space below the zero-size box, so its triangular wedge has a base at the bottom and a tip at the center. It therefore points upward. The same opposite-side mapping applies around the box. Equal adjacent border widths center the tip, while unequal widths produce a deliberately skewed triangle.

Good uses

Creating a small disclosure caret beside an expandable navigation item without adding an image or SVG asset.
Adding a direction-specific pointer to a tooltip, popover, or menu by placing the triangle in a pseudo-element.
Building a speech-bubble tail whose fill color must match a surrounding CSS background color.

Limits and checks

The element's declared width and height can both be zero even though its borders create a visibly larger box. Do not read those two declarations as the rendered triangle dimensions.
Changing the colored border width changes the triangle's altitude. Changing the two adjacent transparent border widths changes its base and can also move the tip off center.
Diagonal border edges are rasterized by the browser. Small triangles can show jagged edges or faint color fringes, especially against a contrasting background or after CSS scaling.

Common questions

Can I apply the generated triangle CSS to an element containing text?

Usually not without additional layout work. The border triangle relies on a zero-size content box, so ordinary text does not fit inside the visible shape. Apply it to an empty element or a ::before or ::after pseudo-element instead, then position that triangle relative to the text-bearing element.

Can one generated border triangle have both a fill and a separate outline?

No, the basic single-element border trick exposes one filled wedge and does not provide an independent outline around all three edges. A common extension is to layer two triangles of different sizes and colors, often with two pseudo-elements, then offset the smaller triangle so the larger one appears as the border.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.