← All Tools

CSS Triangle Generator

Create pure-CSS triangles for tooltips, dropdowns, and arrows — using the classic border trick or modern clip-path.

Direction

100
80

Preview

📋 CSS Code

💡 Technique Notes

Border trick — works in every browser, even ancient ones. A zero-size element with unequal border colors renders triangles at each corner. Fast to paint, scales well, and plays nicely with position:absolute for tooltip arrows.

clip-path — simpler mental model (you describe the shape) and supports rotation, gradients, and background images inside the triangle. Supported in all modern browsers. Better when the triangle needs a gradient fill or an image inside.

✓ Copied!