Tag: CSS Tools

CSS triangles solve a specific problem: drawing a small triangular shape (tooltip arrows, dropdown indicators, breadcrumb separators, accent shapes) without an SVG or image. The two techniques have been around forever — the border-trick variant is famously hacky CSS that works because of how browsers render border miters at the corners of an element. The clip-path variant is straightforward but needs more recent browser support.

Our CSS triangle generator builds either form. Pick a direction (up, down, left, right, or one of four diagonals), set size and color, and copy the production CSS. Both versions are inline-able — no extra HTML elements needed beyond the triangle’s own div or span. This guide explains both techniques, when to use which, and the rendering quirks that make one or the other choice for specific contexts.

Border trick vs clip-path — which to use

For tooltip arrows and dropdown indicators (decoration only): use the border trick. For triangular badges, decorative shapes, or any triangle that needs gradients, text inside, or animation: use clip-path.

The border-trick technique explained

An element with width: 0; height: 0; and thick borders renders as four diagonal-mitered triangles meeting at the centre. Make three of those borders transparent and you’re left with a single triangle in the colour of the visible border:

/* Triangle pointing up — 30px wide, 20px tall */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #635BFF;
}

/* Triangle pointing down */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #635BFF;
}

The size is implicit: the triangle’s width is twice the border-left/right width (30px above), and its height is whatever the visible border thickness is (20px). To change direction, change which border is solid and which are transparent.

The clip-path technique explained

A real-sized div clipped to a polygon shape produces an editable, fill-able triangle:

/* Triangle pointing up */
.triangle-up {
  width: 60px;
  height: 60px;
  background: #635BFF;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Add gradient or border easily */
.triangle-gradient {
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #635BFF, #00D4FF);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Bonus: clip-path triangles can have text inside (it’s a real div), can be flex/grid containers, and can be animated. The cost is needing modern browser support (Chrome 23+, Firefox 54+, Safari 7+ — universal in 2026 except IE).

How to generate a CSS triangle

1. Open the CSS triangle generator
2. Pick direction (up, down, left, right, top-left/top-right/bottom-left/bottom-right diagonals)
3. Set width and height
4. Pick color, plus a stroke for the clip-path version
5. Toggle between Border trick and clip-path output
6. Click Copy CSS

When you’d use a triangle in real CSS

• Tooltip arrows. A triangle pointing at the trigger element. The classic use — small (8–12px), border-trick, positioned absolutely against the tooltip body.
• Dropdown carets. The little ▼ next to “More” buttons. Often replaced by SVG icons in modern UIs but still common in plain-CSS contexts.
• Breadcrumb separators. The “›” between items. Often a real character, but a CSS triangle gives precise control over color and angle.
• Speech-bubble pointers. Chat-bubble UIs use a triangle pointing at the speaker. Border trick or clip-path both work.
• Decorative section dividers. A wide, flat triangle as a wedge between page sections. Use clip-path on a full-width div for this.
• Custom badges. Triangular accent on the corner of a card. clip-path with text inside.

Common gotchas

• Sub-pixel rendering. Triangles smaller than 8px can look blurry on non-retina displays because the diagonal isn’t a clean pixel boundary. Either use larger triangles or accept slight anti-aliasing artefacts.
• Background colour bleeds. The transparent borders in the border trick still occupy hit-test area. The visible triangle’s clickable region extends to the full bounding box, not just the visible part.
• Inline element issues. A border-trick triangle on a <span> may render with line-height padding around it. Use display: inline-block or wrap in a container.
• Right-to-left layouts. A triangle pointing “left” should flip to point “right” in RTL layouts. CSS logical properties (margin-inline-start etc.) help, but border-direction names don’t have logical equivalents — handle the flip manually with [dir="rtl"] selectors.
• Animation cost. Border-trick triangles can be expensive to animate (changing border width triggers layout). clip-path triangles animate cheaply (transform-only).
• Don’t try to gradient-fill a border-trick triangle. Borders take a single solid color. For gradients, use clip-path; for the border trick, use a wrapper element with the gradient and the triangle as a mask.

When NOT to use a CSS triangle

For complex shapes (chevron with rounded corners, triangular logos, multi-color triangles), use SVG inline — much more flexible. For a triangle with shadows, drop-shadow, or stroke effects, use clip-path with filter: drop-shadow(). For very tiny triangles (under 4px), consider Unicode characters (▲ ▼ ◀ ▶) which are font-rendered and crisp at small sizes. For animated character indicators (like a pulse arrow), an SVG with proper SVG animations is smoother than a CSS-only approach.

Frequently asked questions

Why does the border trick work?

Browsers render borders with diagonal miters at corners. An element with zero width and height is just a point — the corners meet at the centre — and each border becomes a triangle pointing inward. Make three transparent and one solid coloured, and you see only the solid triangle.

Which technique should I use?

For tooltip arrows and small UI triangles: border trick (universal support, simpler positioning). For decorative triangles with content, gradients, or animation: clip-path. Both are universally supported in 2026 except IE (retired).

Can I make a triangle with rounded corners?

Not with the border trick. With clip-path, the polygon corners are sharp by default — for rounded triangles, use SVG with stroke-linejoin or a custom path. There’s a CSS proposal for shape-radius but it’s not implemented yet.

How do I rotate a triangle?

For arbitrary angles, generate a “pointing-up” triangle and apply transform: rotate(45deg). The triangle rotates around its centre. Combine with transform-origin to rotate around a different point.

Is my data uploaded?

No. The generator runs in your browser. Triangle settings, the live preview, and the generated CSS stay on your device.

Can I have text inside a CSS triangle?

Yes — only with the clip-path version. The border-trick triangle has zero width and height, so no content fits. clip-path triangles are real divs with full layout properties — text, flex, grid, anything.

Related tools and guides

• CSS Triangle Generator
• CSS Clip Path Generator
• CSS Border Radius Generator
• CSS Pattern Generator
• All CSS tools