CSS Triangle Generator

Generate pure-CSS triangles using the classic border-only trick. Pick direction, size, and color — get the CSS for a div that renders as a triangle. Useful for tooltip pointers, dropdown indicators, and decorative shapes without SVG.

How to use the CSS Triangle Generator

Pick direction, width, and height. The preview updates live. Output is a complete CSS rule including width: 0; height: 0; (required for the trick to work) and the border declarations that form the triangle.

How the CSS triangle trick works

An element with width: 0; height: 0; and thick borders shows the borders as colored wedges meeting at the center. By making three borders transparent and one colored, you get a triangle. Adjusting the width/height of opposite borders changes the angle.

The technique predates more modern alternatives (SVG, clip-path), but it's still the lightest weight option — no extra HTTP request, works in any browser, easy to color with currentColor for theme integration.

Frequently asked questions

How does the CSS border trick make a triangle?
An element with zero width and height and thick borders shows four triangular borders meeting at the center. Making three of them transparent leaves a single visible triangle.

Why use CSS instead of an SVG or image?
A border triangle needs no extra HTTP request and inherits its color from CSS, which makes it ideal for tooltip arrows and dropdown carets.

Can I rotate or resize the triangle?
Change the size to scale it and pick a direction for orientation. For arbitrary angles, apply a CSS transform: rotate() to the generated element.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: