CSS Triangle Generator
Generate CSS code for triangles.
Last reviewed by the Radiatus Cloud team
CSS Triangle Generator
Create pure CSS triangles for your web designs.
Need this built for your product?
We design, build & host secure software & APIs.
Generate a CSS triangle
CSS has no triangle shape, but the border trick produces one, and this generator gives you the code. It generates the CSS for a triangle pointing in any direction, so you get the shape without an image or SVG.
How the border trick works
A triangle is made by giving an element zero size and thick borders, then making three of the four transparent so the fourth shows as a wedge. The generator produces that code for the direction and size you want, handling the fiddly combination of border widths and colours. This is how the little arrows on tooltips, dropdowns and speech bubbles are drawn, and generating the code beats remembering the exact border combination each time.
Copy the CSS
It runs entirely in your browser, so nothing you paste is uploaded and the result is yours to copy straight into a project, which lets you work on private code and data without anything leaving your machine.
Related tools
- JSON Formatter — Format and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
- JSON Validator — Validate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
- Regex Tester — Test regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.
- HTML Minifier — Minify HTML by removing comments and redundant whitespace, without breaking inline elements or pre blocks. Runs entirely in your browser.
Frequently Asked Questions
How does CSS make a triangle?
By shrinking an element to zero size so only diagonal border corners remain, then making three borders transparent so the fourth shows as a triangle.
What are CSS triangles used for?
The arrows on tooltips, dropdowns and speech bubbles, where an image or SVG would be overkill for a simple shape.
Can it point any direction?
Yes. Which border is coloured sets the direction, and the generator produces the code for whichever way you choose.
Why generate rather than write it?
Because the exact border-width and colour combination is fiddly to remember. Generating gives correct code every time.
Is my input uploaded?
No. The generator runs entirely in your browser.
Privacy & Security
Local processing.
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
JSON Formatter
DeveloperFormat and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
JSON Validator
DeveloperValidate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
Regex Tester
DeveloperTest regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.