CSS & Web Design5 min read•Updated 2026-09-07
How to Make CSS Triangles & Polygon Clip-Paths Without Images
Master classic border-hack carets for tooltips and dropdowns, as well as modern CSS clip-path polygon shapes.
MX
MultiToolX Technical Team
Frontend Engineering
Key Takeaways
- The CSS border-hack triangle works by setting element width and height to 0 and coloring a single border while keeping adjacent borders transparent.
- Modern CSS clip-path: polygon() creates sharper geometric shapes that support background images, gradients, and hover transitions.
- Border triangles work on 100% of browsers dating back to IE6 and require zero external image assets.
Live Interactive Tool
CSS Triangle & Polygon Generator
Use this tool directly below without leaving the guide. 100% free & in-browser.
1. How Border-Hack Triangles Work
When an element has width: 0 and height: 0, its borders meet at 45-degree diagonal angles:
```css
/* Triangle pointing UP */
.triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #3b82f6;
}
```
Notice that to point UP, you color the BOTTOM border. To point DOWN, color the TOP border.
2. The Modern clip-path: polygon() Technique
With clip-path, you can turn any regular <div> into a triangle using coordinate percentages:
```css
.polygon-triangle {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```
Unlike border hacks, clip-path allows applying gradients, background images, and hover transitions directly to the triangle surface.
Frequently Asked Questions
How do I attach a triangle pointer to a tooltip?
Use a pseudo-element like '.tooltip::after' with 'position: absolute', 'bottom: -8px', and 'left: 50%' with the border-hack CSS triangle rules.
Can border-hack triangles have a box-shadow?
Regular box-shadow creates a square shadow around the invisible container box. To add a drop shadow to a border triangle, use 'filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.15))'.
Ready to use CSS Triangle & Polygon Generator?
Fast, 100% private, client-side processing. No account, no watermark, completely free.