CSS Triangle Generator
Make CSS triangles in any direction, size, and color.
Triangles without images
A pure-CSS triangle is a classic trick: give a zero-size box thick borders, make three transparent, and the remaining border becomes a triangle. It powers countless tooltip arrows and carets.
Choose a direction, size, and color, and the preview and CSS update together. Copy the rule straight into your tooltip, dropdown, or ribbon.
Clever and private
The CSS is generated in your browser, so nothing you enter is uploaded.
Frequently Asked Questions
How do CSS triangles work?
By giving a zero-size element thick borders and making three of them transparent, the fourth border forms a triangle.
What are they used for?
Tooltip arrows, dropdown carets, ribbons, and decorative pointers, all without images.
Can I copy the CSS?
Yes. The full rule is shown and one click copies it.
Browse the full set of free, private, in-browser tools.