How CSS Triangles Work: Borders, Zero Size, and Shape Tricks

By the end of this page, you will understand that CSS triangles are created by giving an element width: 0 and height: 0, then using its borders as visible angled edges. You will see why transparent side borders and one colored border form a triangle, how the browser draws it, and how to create triangles pointing in different directions.

CSS triangles are not a special built-in shape. They are a visual side effect of how borders are drawn around an element.

Normally, an element has content width and height, and borders are drawn around that rectangular box. But when you set:

width: 0;
height: 0;

the element itself has no visible rectangular area. The only thing left to render is its borders.

Each border still has thickness. When borders meet at the corners of a zero-sized box, the browser draws them as diagonal edges that meet at a single point. That creates four wedge-like triangular regions:

• top border
• right border
• bottom border
• left border

If all four borders have color, you would see a shape made of four triangles meeting in the center.

When three of those borders are transparent and one border has a visible color, only one triangular wedge remains visible.

In this example:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

what happens is:

• the left border creates a transparent triangle extending left

Imagine a point in the middle where four paper wedges meet:

• one wedge points up
• one wedge points right
• one wedge points down
• one wedge points left

Now imagine making three wedges invisible and leaving only one colored wedge visible. That single visible wedge looks like a triangle.

Another way to think about it:

• a normal box has a body and borders
• a zero-sized box has no body
• so only the borders remain
• the borders collapse into triangular slices around the center point

So a CSS triangle is really just one visible border slice of a box with no size.

Core idea

.element {
  width: 0;
  height: 0;
}

Then use borders to create the visible triangle.

Up-pointing triangle

.up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

This creates:

• a transparent left slant
• a transparent right slant
• a visible red bottom wedge

The visible result looks like a triangle pointing up.

Down-pointing triangle

.down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}

Consider this example:

.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid purple;
}

Step 1: The browser creates the element box

The element exists, but:

width: 0;
height: 0;

So it has no visible rectangular content area.

Step 2: Borders are still drawn

Even though the box has no area, borders can still have thickness:

• left border = 30px
• right border = 30px
• bottom border = 60px

Step 3: The borders meet at a single point

Since the box is zero-sized, the borders collapse inward and meet at the same center point.

Step 4: The browser draws angled joins

CSS border corners are drawn with diagonal joins. That means each border becomes a triangular region instead of a rectangle.

Step 5: Transparent borders become invisible

The left and right borders exist, but they are transparent:

CSS triangles are commonly used in UI design because they are simple, fast, and require no image files.

Common uses

• Tooltip arrows: the little pointer connecting a tooltip to a button
• Speech bubble tails: a small triangle attached to a chat bubble
• Dropdown indicators: tiny arrows showing a menu can open
• Accordion icons: triangles indicating expand/collapse direction
• Callouts and popovers: small directional pointers on floating panels
• Breadcrumb separators: angled pointer-like shapes between items

Example: tooltip arrow

.tooltip-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
}

This creates a small arrow below a tooltip.

Why developers like this technique

• no external assets needed
• easy to recolor with CSS
• lightweight and fast to render
• works well for small decorative UI shapes

In real projects, developers usually do not leave triangle elements floating on their own. They are often attached to other components using pseudo-elements like ::before and ::after.

Common pattern: tooltip pointer with pseudo-element

.tooltip {
  position: relative;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
}

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

This is common because:

1. Forgetting width: 0 and height: 0

If the element has normal size, you will not get the clean border-only triangle effect.

Broken example:

.bad {
  width: 100px;
  height: 100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

This creates a box with borders, not a simple triangle.

2. Coloring the wrong border

Beginners often expect border-top to create an upward triangle, but the visible border creates a triangle that points the opposite way.

/* Points down, not up */
border-top: 50px solid red;

3. Using transparent incorrectly

If side borders are not transparent, you will see extra wedges.

Broken example:

.bad {
  width: 0;
  : ;
  :  solid blue;
  :  solid green;
  :  solid red;
}

Border triangle vs clip-path

.triangle-clip {
  : ;
  : ;
  : red;
  : ( ,  ,  );
}

/* Up */
.up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid red;
}

/* Down */
.down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid red;
}

/* Left */
.left {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 40px solid red;
}

/* Right */
.right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  :  solid transparent;
  :  solid red;
}

Why does width: 0 and height: 0 still show something?

Because borders can still have thickness even when the content box has no size. The visible part is the border, not the element body.

Why does border-bottom create an upward triangle?

The bottom border forms the visible wedge under the collapsed center point, so the shape appears to point upward.

Can I use background-color instead of borders to make this triangle?

Not with this specific trick. The triangle comes from border geometry, not the element background.

Why are the side borders transparent instead of omitted?

They define the slanted edges and triangle width. If they are omitted, the shape will not look the same.

Can I add a border around a CSS triangle?

Not directly in the normal box sense. A common solution is to layer two triangles, one slightly larger behind the other.

Are CSS triangles responsive?

Yes. You can use relative units like em, rem, or CSS variables to scale them.

Is this still used in modern CSS?

Yes. It is still common for small arrows and pointers, even though clip-path and SVG are also popular.

• CSS borders — CSS triangles depend entirely on how borders are drawn.
• Box model — understanding content, padding, border, and size helps explain why zero-sized elements still show borders.
• Transparent colors — transparent borders are essential to hiding unwanted sides.
• Pseudo-elements (::before and ::after) — triangles are often attached to components using pseudo-elements.
• Positioning in CSS — arrows and pointers are usually placed with position: absolute.
• clip-path — an alternative way to create triangular and polygon shapes.
• SVG basics — useful when border triangles are too limiting.
• Tooltip styling — one of the most common real uses of CSS triangles.