CSSApril 2026 · 5 min read

How to Create a CSS Triangle (Border Trick Explained)

CSS triangles are created by exploiting how borders meet at corners. When an element has zero width and height, its borders form triangles at each corner. By making three borders transparent and one colored, you get a single triangle pointing in any direction. It's the most elegant CSS hack that's survived into modern web development.

▲

Try the CSS Triangle Generator

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01The Border Trick Explained02Triangles in Every Direction03Practical Uses04Modern Alternatives

⚡ Key Takeaways

Create CSS triangles using the border trick.
The Border Trick Explained.
Covers triangles in every direction.
Covers practical uses.
Covers modern alternatives.

The Border Trick Explained

When you set width and height to 0, an element becomes just its borders. Each border forms a triangle meeting at the center:

.triangle-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #00FFD1;

}

The colored border (top) forms a downward-pointing triangle. The transparent side borders define the triangle's width. Change which border is colored to change direction.

Triangles in Every Direction

Point up: color border-bottom, transparent left+right. Point down: color border-top, transparent left+right. Point left: color border-right, transparent top+bottom. Point right: color border-left, transparent top+bottom. For diagonal triangles, color two adjacent borders and make the others transparent.

💡 Tip

Stick to animating transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.

Practical Uses

Tooltip arrows (positioned with ::before or ::after pseudo-elements). Dropdown menu indicators. Breadcrumb separators. CSS-only accordion expand/collapse icons. Section divider shapes. The CSS Triangle Generator lets you set direction, size, and color visually, then copy the CSS.

⚠ Warning

Avoid animating width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.

Modern Alternatives

CSS clip-path: polygon() creates triangles (and any other shape) without the border hack:

.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

This is more readable and supports background images, gradients, and hover effects. Use clip-path for decorative shapes; use the border trick for small indicators like tooltip arrows where simplicity matters.

Frequently Asked Questions

How do I create a triangle in CSS?+

Set width and height to 0, make three borders transparent, and color the fourth. The colored border forms a triangle pointing away from its side. The transparent borders control the triangle's width.

Can I create an equilateral triangle in CSS?+

Yes. For an equilateral triangle pointing up: border-left and border-right set to half the desired width, border-bottom set to the desired height × 0.866 (√3/2). The CSS Triangle Generator calculates this automatically.

Is clip-path better than the border trick?+

clip-path is more readable and supports backgrounds and hover effects. The border trick is simpler for small indicators (tooltip arrows, dropdown carets) and has broader browser support for very old browsers.

Try it yourself

Use the CSS Triangle Generator — free, no signup required.

⚡ Open CSS Triangle Generator

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading