CSS Trapezoid Shape - Pure CSS Geometric Shapes

The Border Trick (Classic Method)

The most well-known CSS trapezoid technique uses thick, transparent borders on an element with zero width and height. By making one border colored and adjacent borders transparent, a trapezoid shape emerges.

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid #04122e;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

clip-path (Modern Method)

The clip-path property is the modern, preferred way to create trapezoids. It works on any element, supports backgrounds, images, and text content.

/* Standard trapezoid */
.trap {
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #04122e;
  width: 300px;
  height: 150px;
}

/* Inverted trapezoid */
.trap-inv {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

/* Left-leaning trapezoid */
.trap-left {
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Right-leaning trapezoid */
.trap-right {
  clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
}

clip-path Coordinate Reference

Transform Method (perspective)

.trapezoid-3d {
  width: 200px;
  height: 100px;
  background: #04122e;
  transform: perspective(300px) rotateX(10deg);
  /* The perspective creates a natural trapezoid effect */
}

/* Combine with text inside */
.tab-trap {
  padding: 12px 40px;
  background: #f2bf59;
  transform: perspective(200px) rotateX(5deg);
  transform-origin: bottom;
}

Practical UI Patterns

/* Trapezoid navigation tabs */
.nav-tab {
  display: inline-block;
  padding: 10px 30px;
  background: #e8e8e8;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  cursor: pointer;
  transition: background 0.2s;
}
.nav-tab.active {
  background: #04122e;
  color: white;
}

/* Decorative section divider */
.section-divider {
  width: 100%;
  height: 80px;
  background: #04122e;
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}

/* Ribbon / badge */
.ribbon {
  display: inline-block;
  padding: 6px 20px 6px 15px;
  background: #f2bf59;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  font-weight: bold;
}

Browser Support

The clip-path: polygon() property is supported in all modern browsers (Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+). The border trick works everywhere including IE9+. For older browser fallback, consider using the border method as a progressive enhancement base.