Developer utility
Standalone tool pageCSS Triangle Generator
Generate pure CSS triangle arrows for tooltips, labels, and UI decorations.
Output
Result
CSS
—
How It Works
Choose a direction, size, and color. The generator outputs a border-based CSS snippet and a live preview.
Example
Create a small upward triangle for a tooltip arrow or a right-pointing triangle for a play button.
Frequently Asked Questions
How does a CSS triangle work?
It uses a zero-width, zero-height element with transparent borders on three sides and one colored border to form the triangle.
Can I use this for tooltips?
Yes. Copy the generated CSS into a pseudo-element such as ::before or ::after.
Does it need JavaScript on my site?
No. The generated triangle is pure CSS.