CSS Triangle Generator
Generate a pure-CSS triangle in any direction, size, and color using the zero-width-border trick, with copyable CSS.
Direction
Size: 80px
Live Preview
Free CSS Triangle Generator
Generate a pure-CSS triangle in any direction, size, and color using the classic zero-width-border trick — no images or SVGs needed. Pick a direction, adjust the size and color, and copy the ready-to-use CSS.
How to Use It
Choose which way the triangle should point (up, down, left, or right), drag the size slider, and pick a color. The live preview and the generated CSS update instantly — click Copy to grab the code and paste it into your stylesheet.
How the CSS Triangle Trick Works
The trick relies on how browsers render borders on a zero-width, zero-height element: each border edge meets the others at a diagonal. Making two opposite borders transparent and giving the third a solid color leaves only that diagonal edge visible, which reads as a triangle pointing away from the solid side.
Common Use Cases
- Dropdown menu carets and tooltip pointers/arrows.
- Custom bullet points, badges, or decorative accents in a design.
- Speech-bubble tails for comment boxes or chat UIs.
FAQs
Can I make a triangle that isn't equilateral?
Yes — this generator uses equal border widths for a symmetric triangle, but you can manually edit the copied CSS and set different pixel values on the two transparent border sides to skew the shape.
Does this work in all browsers?
Yes — the border-based triangle trick is supported in every modern browser and has been for a very long time, since it relies on basic CSS border rendering rather than any newer feature.
Is my data uploaded anywhere?
No — the preview and CSS are generated entirely client-side in your browser.