CSS Triangle Generator
Generate code for pure CSS triangles using transparency hacks.
Last reviewed by the Radiatus Cloud team
Triangle Settings
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Triangles from borders, no images
CSS has no dedicated triangle shape, but a well-known and reliable trick makes one from borders: give an element zero size and thick, differently-coloured borders, then make three of the four transparent. This generator produces that code for a triangle pointing in any direction you choose, so you get the shape without loading an image or writing an SVG. It is the standard technique behind countless interface arrows across the web.
Why the border trick works
Where two borders of an element meet at a corner, they meet along a diagonal line rather than a straight one. Shrink the element down to nothing and only those diagonal border wedges remain visible; make three of the four sides transparent and the single remaining side renders as a clean triangle. It is undeniably a hack, but a completely reliable and universally supported one, which is why CSS tooltips, dropdown arrows and speech bubbles have relied on it for years.
Point it any way, copy the CSS
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
How does CSS make a triangle from borders?
By shrinking an element to zero size so only its diagonal border corners remain, then making three borders transparent so the fourth shows as a triangle.
What are CSS triangles used for?
The little arrows on tooltips, dropdowns and speech bubbles, where an image or SVG would be overkill for such a simple shape.
Can it point in any direction?
Yes. Which border is coloured determines the direction, and the generator produces the code for a triangle pointing whichever way you choose.
Is the trick well supported?
Yes. It relies on basic border rendering that every browser handles, which is why it has been a reliable technique for years.
Is my input uploaded?
No. The generator runs entirely in your browser.
Privacy & Security
Generated locally.
About This Tool
This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.