The CSS Triangle

pure css 2006 still works

A triangle drawn from the borders of a box with no width and no height.

In 2026: A box with zero width and height has borders that meet along diagonals. Make three sides transparent and one side solid, and the solid side is a triangle. Every browser still renders it, and it was the standard way to draw a callout arrow or a dropdown caret before clip-path and inline SVG were common.

Where it came from: Chris Coyier, CSS-Tricks 'CSS Triangle', roughly 2009. The border technique circulated on CSS forums before that. CSS-Tricks ↗

<style>
.tri-up {
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid #c0392b;
}
.tri-right {
  width: 0; height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 52px solid #2c7d4f;
  margin-top: 18px;
}
</style>

<p>An element with zero width and zero height. Its four borders meet along 45 degree diagonals, so one solid border with its neighbours transparent leaves a triangle.</p>
<div class="tri-up"></div>
<div class="tri-right"></div>

sandboxed demo · breaks nothing but itselfrestart

More in pure css