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.