Why does the border trick produce a triangle?

When a block element has zero width and height, its borders have nowhere to extend except inward. The CSS rendering algorithm draws each border as a trapezoid that meets its neighbors at 45-degree diagonals. With a zero-size box, those trapezoids collapse into pure triangles meeting at the center. By making three of them transparent and one solid, you isolate a single triangle. It's a side effect of how borders render at the limit case — not a designed feature, but reliable across every browser since the 1990s.

Is the border trick still recommended in 2026?

For triangular UI elements like dropdown carets, tooltip arrows, and small directional indicators — yes. It's lightweight (no extra DOM, no SVG parsing), supported everywhere, and inherits color through currentColor. For anything more complex than a triangle (custom shapes, curves, multi-segment paths), use clip-path or SVG. The border trick is not deprecated; it's just narrowly scoped.

Can I create a triangle with rounded corners?

Not with the border trick — it produces sharp corners only. For rounded triangles, use SVG with a path that has rounded line joins, or clip-path with a polygon and a separate border-radius treatment. Some advanced CSS techniques use stacked borders or pseudo-elements to fake rounding, but they're fragile and break at different sizes. SVG is the practical choice.

How do I rotate a triangle to a non-standard angle?

Use CSS transform: rotate() on the triangle element. The border trick gives you 8 cardinal directions; for anything in between (say, a 30-degree arrow), rotate the result. For example: a 'right' triangle rotated 30 degrees becomes an arrow pointing up-and-to-the-right at 30 degrees. The transform approach is simpler than recalculating border widths to skew the triangle into a non-isoceles shape.

Is there a performance difference between border triangles, clip-path, and SVG?

Marginally yes, but rarely meaningful. Border triangles are the cheapest because they're just borders on an empty div — no painting beyond the border itself. Clip-path requires the browser to compute a mask, which is slightly more expensive on initial paint but negligible after. SVG adds a separate node to the render tree. For one tooltip arrow, the difference is unmeasurable. For thousands of triangles in a list (like rating stars), use SVG sprites — the per-element overhead of inline SVG dominates at scale.

Pure-CSS Triangles in 2026 — When the Border Trick Still Wins (and When It Doesn't)

I keep a running joke that you can date a frontend developer's career by what they reach for when they need to draw a triangle. If they go straight to an <svg> element, they probably learned CSS post-2018. If they use clip-path: polygon(...), they came up around 2015-2018. If they instinctively reach for a <div> with weird border declarations, they've been doing this for a long time.

The "weird border declarations" version — the CSS triangle border trick — is the oldest of the three and still my default choice for small UI elements. This guide explains why it works, when it's the right answer, when it isn't, and how to use the CSS Triangle Generator at ToolBox Hubs to skip the math.

The Trick, Briefly

Take a div with zero width and zero height. Give it borders. The borders have nowhere to extend, so they collapse into the center, with each border becoming a triangle that meets the others at 45-degree diagonals.

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

You get a square divided into four colored triangles meeting at the middle. Now make three of those borders transparent:

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

You're left with a single red triangle pointing down. That's the trick. It's been in CSS since the spec defined how borders meet at corners, which means it's worked in every browser ever, including IE6.

In 2026 there are three reasonable ways to draw a triangle in a web UI:

The border trick — width: 0; border: ...
clip-path — clip-path: polygon(...) on a colored element
SVG — <svg><polygon points="..." /></svg>

For small directional UI elements (dropdown carets, tooltip arrows, breadcrumb separators, accordion chevrons), the border trick is usually best because:

No extra DOM nodes. It's just a styled div or pseudo-element. SVG adds a separate node to the render tree, plus its internal <polygon> element. For a tooltip with arrow, that's 1 extra node vs. 2-3.

Inherits currentColor by default with a tiny tweak. Set the border color to currentColor and the triangle adopts the parent's text color. Useful for dark/light mode handoff without rewriting CSS rules.

No SVG namespace concerns. You don't need xmlns, you don't need to think about viewBox, you don't have to worry about whether the SVG is inline or sprite-referenced.

Renders crisp at every zoom level. The border trick uses subpixel rendering by the browser's CSS engine, which is the most aggressively optimized rendering path. SVG can sometimes show anti-aliasing artifacts at 1px scales, especially in older browsers.

For triangles that ARE buttons or have hover effects, the styling and transition support is identical to any other element — :hover { border-bottom-color: blue } just works.

When You Should Reach for clip-path or SVG Instead

Being honest about limits:

Anything that isn't a basic triangle. Stars, pentagons, arrows with complex shapes, anything with curves. The border trick is triangle-only by mathematical necessity. Reach for clip-path with polygon() or SVG.

Triangles that need to scale with text. The border trick uses pixel values. If you want a triangle that scales with the parent element's font size, you can use em or rem units as the border widths — but it's awkward. SVG with viewBox handles scaling more naturally.

Triangles with rounded corners. No way to round corners with the border trick. SVG path with stroke-linejoin="round" or clip-path with separate border-radius is the path forward.

Triangles that need a stroke (outline) different from the fill. Borders can't have their own border. SVG has fill and stroke as separate properties — perfect for outlined arrows.

Triangles that change shape (animate between shapes). SVG can morph between paths smoothly. clip-path can interpolate between polygon points. Border-based triangles can't change shape — only size and color.

For 80% of UI triangles, none of those conditions apply. The simple cases stay simple.

The Math (Or: Why You Want a Generator)

The catch with the border trick: figuring out the right border declarations for the direction you want is annoying.

For an upward-pointing triangle:

top border: 0
left border: half-width transparent
right border: half-width transparent
bottom border: full-height solid color

For a leftward-pointing triangle:

top border: half-height transparent
right border: full-width solid color
bottom border: half-height transparent
left border: 0

For a corner triangle (right triangle in a corner):

two adjacent borders solid color (one of them sets the size)
two opposite borders are 0
...wait, that's wrong, let me look it up...

You can see the issue. Every direction has its own arrangement of which borders are colored, which are transparent, and which are zero. The math is doable but it's annoying enough that I rewrite the same triangle CSS three times before it's right.

This is the CSS Triangle Generator sweet spot. Pick a direction, set width and height, choose a color, copy the CSS. The generator does the border arithmetic so you don't.

Eight Directions That Cover Most Use Cases

The four cardinal directions (up, down, left, right) produce isoceles triangles centered on the element. These are what you want for centered indicators: dropdown arrows below a button, tooltip pointers, expand/collapse chevrons.

The four corner directions (up-left, up-right, down-left, down-right) produce right triangles anchored to a corner. These are what you want for corner ribbons, folded-paper effects, badge accents, and chevron-style breadcrumb separators.

/* Right-pointing arrow (think dropdown caret) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* Corner ribbon (top-right) — solid triangle in upper-right corner */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

The generator covers all eight in a unified UI so you don't have to remember which border configuration produces which direction.

Practical Patterns

A few real-world snippets that show the border trick in action.

A tooltip with an arrow pointing at the trigger element. The arrow is a pseudo-element on the tooltip:

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

The border-top color matches the tooltip background, so the arrow appears to be part of the same shape. This is the canonical use case.

The classic ">" separator between breadcrumb items, but as a CSS-drawn arrow:

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

You could use a › Unicode character, but the CSS approach gives you precise size control and matches your design system colors exactly.

Speech Bubble Tail

The tail on a chat message bubble:

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

The "down-right" corner triangle shape, anchored to the bottom-left of the bubble, gives that classic speech-bubble tail look without an SVG.

Common Mistakes

Things that have broken triangles for me:

Forgetting width: 0; height: 0;. Without these, the borders draw around an actual box rather than collapsing to a point. You get a frame instead of a triangle.

Setting only the border-color and forgetting border-width. A border with zero width doesn't draw, regardless of color. All four borders need explicit widths even if some are zero.

Confusing border-top with the top of the triangle. The triangle points AWAY from the colored border. A solid border-bottom produces a triangle pointing UP. If you want the triangle to point DOWN, use a solid border-top. This trips everyone up at first.

Sizing the triangle with width instead of border widths. Setting width: 100px; height: 50px does nothing useful — the element still needs to be zero-size for the border trick. The "size" of the triangle is controlled entirely by the border widths.

Hover transitions on color but not border-color. transition: background-color 200ms won't animate a border triangle. Use transition: border-color 200ms (or transition: all) for the color change to animate.

A Note on currentColor

currentColor is a CSS keyword that resolves to the element's color property value. It's incredibly useful for triangles that need to match the parent's text color:

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* This triangle inherits the button's color */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* Triangle automatically updates to the new color */
}

This pattern is what makes border triangles play well with theme systems and dark mode. Set the color once on the parent, and every triangle inherits it. No need for separate dark-mode CSS rules for each triangle direction.

Tools That Pair Well

Triangles are usually one piece of a larger UI puzzle. These tools come up often in the same workflow:

CSS Clip Path Generator — for shapes more complex than triangles (stars, pentagons, arrows)
CSS Gradient Generator — for filling backgrounds behind your triangles
CSS Border Radius Generator — for rounded shapes that complement the sharp triangles
Color Picker — for dialing in the exact triangle color from a brand palette

The CSS Triangle Generator is free, runs entirely in your browser, and outputs clean CSS you can paste into any stylesheet — no framework dependencies, no preprocessing, no build step required. Pick a direction, drag the size sliders, copy the code.

Why I Still Use This in 2026

Frontend trends move fast. Frameworks come and go. CSS itself has added container queries, :has(), layered styles, view transitions — major features that change how we write modern interfaces.

But the border trick is still the right answer for "I need a small triangle as part of a UI element." It's small, fast, well-understood, and works everywhere. The fact that it's old isn't a problem — it's a sign that it solved its problem completely the first time. Some techniques don't need to be replaced.

Reach for SVG when you need flexibility. Reach for clip-path when you need non-triangle shapes. But for the triangles that show up in tooltips and dropdowns and breadcrumbs — the most common UI triangles — the border trick is still the cleanest option.