Loona CSS Triangle Generator — Border-Trick Triangles in Four Directions
Tooltips, carets, play buttons and speech-bubble tails are all this one trick. Learn it once here and you will see it everywhere.
How to use the CSS Triangle Generator
- Choose the direction the triangle points.
- Set size (the full height of the arrow) and colour.
- Copy the CSS — the element needs no content, just the class.
How it works
A 0 × 0 element’s borders are four triangles meeting at the centre. Making three borders transparent and one coloured leaves a single triangle; border widths control its proportions (the side borders are half the main size for an isoceles arrow).
Worked example
A FAQ accordion’s little ▼ caret, previously an image, becomes six lines of CSS from here — one less file on every page load.
Frequently Asked Questions
Why use CSS triangles instead of an image or emoji?
They scale, recolour with one value, load instantly and stay sharp — and they inherit theming (dark mode) automatically.
Can I make a corner ribbon triangle?
Yes — the right-angle case is two borders coloured; start from the copied pattern and zero one more width.
Does it work for tooltips?
Perfectly — position the triangle at the tooltip edge; it is the standard technique.
Is the output standard?
Yes — plain border CSS, supported since forever.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).