Is the CSS triangle generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Can I use the generated CSS in commercial projects?
Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.
Does it stay local?
Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.
Should I still use the border trick, or clip-path?
clip-path, for almost every new use. clip-path: polygon() draws the triangle from three coordinates that read exactly like what they describe, works on an element that keeps its real width and height, can contain content, accepts a gradient or an image as a background, and can be animated between shapes. The border trick predates it by a decade and survives because it is in everybody's muscle memory. The one place the old technique still earns its keep is a tiny CSS-only caret where you want no extra markup at all.
Why can I not put text inside my triangle?
Because there is no inside. The element is declared with width: 0 and height: 0, and the visible shape is made entirely of border. There is no content box at all, so any child you add would be positioned at a single point and would overflow in every direction. If you need a triangular container with content in it, clip-path is the answer, since it clips a normal element rather than replacing it with a border.
How do I control the triangle's proportions?
The two transparent borders set the half-width of the base and the solid border sets the height. So the base is twice the transparent border width, and the height is whatever you give the solid one. To make a wider, flatter triangle, increase the transparent borders relative to the solid one. To make a tall, narrow spike, do the reverse. Equilateral is not the default, so if you need one, the solid border should be roughly 1.73 times the transparent ones.
Can I add a border or a shadow to the triangle?
Not directly, and this is where the technique really shows its age. The whole shape is already made of border, so there is no border left to add. A drop shadow can be faked with the filter: drop-shadow() function, which follows the painted shape rather than the box, and that does work. An outline around the triangle needs a second, slightly larger triangle stacked behind it, or a switch to SVG.
Does the preview run in my browser?
Yes. The triangle you see is a real element with the generated borders applied, so it renders exactly as it will on your page, and nothing is sent to a server.