How to Create Triangles in CSS: Border vs Clip-Path Methods

In modern UI/UX design, triangles are essential for building dropdown arrows, tooltip pointers, breadcrumbs, and directional indicators. Creating triangles directly with CSS eliminates external image requests, lowers page load times, and makes styling responsive and dynamic.

The Classic CSS Border Method

The traditional trick for creating CSS triangles involves configuring element borders around an element with zero width and height. When adjacent borders have different colors or transparency settings, their diagonal intersections form crisp triangular shapes.

For example, to create an upward-pointing triangle:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #3b82f6;
}

By adjusting which sides are colored and which are transparent, you can produce triangles pointing up, down, left, right, or diagonally.

The Modern CSS Clip-Path Method

With modern CSS layout features, the clip-path property offers a cleaner and more intuitive approach using the polygon() function:

.triangle-clip {
  width: 40px;
  height: 40px;
  background-color: #10b981;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

This method supports fluid percentages, background gradients, and CSS clip transitions seamlessly.

Which Method Should You Use?

• Border Method: Best for legacy browser support and simple fixed-size tooltip tails.
• Clip-Path Method: Ideal for modern responsive interfaces, gradient fills, and dynamic shapes.

To quickly generate triangle CSS snippets without manual math, try our interactive CSS Triangle Generator tool.