CSS Triangle Generator
Visually generate perfect CSS triangles and arrows for tooltips, dropdowns, and UI elements. Adjust the parameters and copy the CSS instantly.
How to Use
- Select the Direction the triangle should point using the 8-way arrow pad.
- Adjust the Width and Height sliders to change the geometry (Equilateral, Isosceles, or Scalene).
- Pick a Color for your triangle.
- Click Copy to instantly copy the cross-browser compatible CSS code to your clipboard.
Features
8 Directions
Generates arrows pointing Up, Down, Left, Right, and 4 diagonals.
Zero HTTP Requests
Pure CSS rendering means no heavy image files or SVGs to load.
Debug Mode
Visually highlights the invisible transparent borders to help you understand the CSS trick.
Cross-Browser
The transparent border hack works flawlessly on every browser, even ancient ones.
Use Cases
- Tooltips & Popovers: Create the small arrow that connects a floating tooltip to its parent element.
- Navigation Menus: Add directional dropdown indicators to your navbar links.
- Chat Bubbles: Build realistic message speech bubbles using an adjacent triangle element.
- Breadcrumbs: Create ribbon or flag-style breadcrumb navigation items visually.
How the CSS Triangle Hack Works
Because CSS doesn't have a native triangle property, developers use a clever hack involving borders. When you set an element's width and height to 0, its borders meet at an angle. If you make three of the borders transparent and give the fourth border a solid color, it creates a perfect triangle.
Toggle the "Show Invisible Borders" checkbox in the tool above to see exactly how the transparent borders are sized to push the colored border into a triangular shape!
Design Toolkit
Combine this tool with our other CSS visual generators. Use the Box Shadow Generator to give depth to your tooltips, the CSS Gradient Generator for backgrounds, and the Border Radius Generator to soften the edges of your UI cards.
Frequently Asked Questions
Why does the generated CSS set width and height to 0?
If the element had a width or height, the center would be an empty box, resulting in a trapezoid instead of a triangle. A width and height of 0 forces the borders to converge perfectly into a point.
Can I add a box-shadow to the triangle?
Unfortunately, standard CSS box-shadow will apply a shadow to the invisible transparent borders (creating a square shadow). To shadow a CSS triangle, you must use the filter: drop-shadow(...) property instead.
Is this better than using an SVG or Image?
For simple geometric UI elements like dropdown arrows, yes. CSS triangles require zero external HTTP requests, load instantly, and their color can be manipulated easily on :hover or :active states via CSS.
Is it free?
Yes, 100% free with no limits.