What Is the CSS Triangle Trick?
CSS triangles use a clever border technique — when an element has zero width and height, its borders form triangles that meet at the center. By making three borders transparent and one colored, you get a clean triangle without any images or SVG. This technique has been a CSS staple for over a decade and remains the simplest way to add arrows and pointers to tooltips, dropdowns, and navigation.
How It Works
Set width: 0; height: 0; on the element. Then apply borders: the colored border determines the triangle's base, and the transparent side borders control its width. The triangle points opposite to the colored border — a colored bottom border creates an upward-pointing triangle.
How to Use This CSS Triangle Generator
- Choose the triangle direction — Select which direction the triangle points — up, down, left, right, or diagonal.
- Set the size — Adjust the width and height of the triangle independently to control its proportions.
- Pick a color — Choose the fill color for the triangle.
- Copy the CSS — Grab the CSS border-trick code that creates the triangle using transparent borders.
Tips and Best Practices
- → The triangle trick uses borders. CSS triangles work by setting an element's width and height to 0, then using colored and transparent borders. The colored border forms the visible triangle.
- → Use triangles for dropdown arrows. Small CSS triangles make perfect arrow indicators for dropdown menus, accordion toggles, and expand/collapse buttons.
- → Consider clip-path for complex shapes. The border trick only creates right triangles and isosceles triangles. For equilateral, scalene, or irregular triangles, use
clip-path: polygon() instead.
- → Use as tooltip arrows. CSS triangles are commonly used as the arrow/caret on tooltip callouts and speech bubble components.
Frequently Asked Questions
How do CSS triangles work?
Set width and height to 0, make three borders transparent, and give one border a solid color. The visible border forms a triangle. The direction is opposite to the colored border — a colored bottom border makes an upward triangle.
What sizes can CSS triangles be?
Any size. Width is controlled by left/right border widths, height by top/bottom border width. For equilateral triangles, set side borders to half the height border width.
When should I use CSS triangles vs SVG?
CSS triangles are ideal for small UI elements — dropdown arrows, tooltip pointers, breadcrumb separators. For larger shapes, complex polygons, or animations, SVG provides more flexibility.
How does the CSS triangle trick work?+
When an element has zero width and height, its borders meet at a point. By making three borders transparent and one colored, the remaining visible border forms a triangle shape. The triangle's direction is opposite to the colored border — a colored bottom-border points upward.
Can I create equilateral triangles with CSS?+
The border trick creates isosceles triangles by default. For equilateral triangles, set the left and right border widths to half the base width, and the bottom border to the base × (√3/2). Alternatively, use clip-path: polygon(50% 0%, 0% 100%, 100% 100%) for a clean equilateral triangle.
Is clip-path better than the border trick for triangles?+
For simple triangles, the border trick has better browser support and is well-understood. Clip-path is more flexible — it supports any polygon shape, is more readable in code, and can be animated. For modern browsers, clip-path is generally the better choice.
How does the CSS triangle trick work?+
When an element has zero width and height, its borders meet at a point. By making three borders transparent and one colored, the remaining visible border forms a triangle shape. The triangle's direction is opposite to the colored border — a colored bottom-border points upward.
Can I create equilateral triangles with CSS?+
The border trick creates isosceles triangles by default. For equilateral triangles, set the left and right border widths to half the base width, and the bottom border to the base × (√3/2). Alternatively, use clip-path: polygon(50% 0%, 0% 100%, 100% 100%) for a clean equilateral triangle.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service