CSS Triangle Generator

An element with zero width and height has four borders that meet at a point in the center. Each border fills a triangular wedge. When three borders are set to transparent and one to a solid color, the colored wedge becomes a visible triangle. The border-width values control the triangle’s dimensions.

CSS triangles add zero HTTP requests, scale with layout changes, and can inherit colors from CSS custom properties. They also animate cleanly — you can transition the border color or width. For simple directional indicators (tooltip carets, dropdown arrows, ribbon corners), a CSS triangle is lighter than any other approach.

Corner triangles are commonly used as decorative ribbon tabs on cards, folded-page effects, or corner badges. They use only two borders (e.g., border-top + border-right for top-left) instead of all four, which creates a right-angle triangle anchored to one corner.

You cannot add a conventional outline to a CSS border triangle because the triangle IS a border. The workaround is to layer two triangles — a slightly larger one in the outline color behind a smaller one in the fill color. This generator outputs a single triangle; for outlined variants, duplicate and offset the element.

Yes. Instead of a hex color, use <code>var(--tooltip-bg)</code> or any CSS custom property in the border-color position. The triangle will update automatically when the variable changes, which makes it easy to theme tooltips and dropdowns for light and dark modes.

This tool creates triangles using the CSS border technique — three transparent borders, one solid. The Clip-Path Generator uses the <code>clip-path: polygon()</code> property instead, which can create triangles along with circles, stars, arrows, hexagons, and custom shapes with draggable handles.