CSS Triangle Generator
Compose a triangle in pure CSS using the classic transparent-borders trick, with a live preview and code ready to copy.
How it works
The trick relies on the fact that an element with no width or height, but with thick borders, displays borders that meet at a point. By making two borders transparent and coloring the third, you get a triangle pointing in the desired direction — no need for an image or SVG for a tooltip arrow or a decorative cursor.
Why use this trick instead of an image?
A pure CSS triangle requires no network request, scales perfectly, and changes color instantly via a CSS variable, unlike a bitmap image or even an external SVG.
Can I animate the triangle's color or size?
Yes, since these are standard CSS properties (border-color, border-width), they can be transitioned or animated with transition or @keyframes like any other CSS property.
100% local processing: the code is generated entirely in your browser via WebAssembly.