How to Make a Trapezoid with CSS

Learn two reliable ways to draw a clean, scalable trapezoid in pure CSS, and see a live preview you can copy. We’ll also show how to center text inside the shape using Flexbox or Grid.

Live Preview: Trapezoid

Method 1: Using clip-path (CSS Masking)

.trapezoid {
  width: 200px;
  height: 120px;
  background: #cd5454;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  margin: 20px auto;
}

Method 2: Using Border Trick

.trapezoid-border {
  width: 140px;       /* top base */
  height: 0;          /* no content box height */
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #cd5454; /* visible face */
  margin: 20px auto;
}

How This Works

The clip-path approach (CSS Masking) clips a regular rectangle into a trapezoid by defining its four corner points with percentages. This preserves a real content box, so it scales nicely and can hold text or icons.

The border trick draws the trapezoid using thick borders on a zero-height element: the colored border becomes the face, and the transparent left/right borders create the slanted sides. It’s lightweight, but there’s no content area inside.

How to Center Content Inside a Trapezoid

The easiest way to center text or icons is to use Flexbox or Grid on the trapezoid element (the clip-path method supports this because it has a normal content box).

Method 1: Use CSS Flexbox

.trapezoid {
  width: 220px;
  height: 130px;
  background: #cd5454;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff; /* example text color */
}

Method 2: Use CSS Grid

.trapezoid {
  width: 220px;
  height: 130px;
  background: #cd5454;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  display: grid;
  place-items: center;
  color: #fff; /* example text color */
}

When to Use Each Shape Method

Use clip-path when you need a responsive, content-friendly trapezoid that can host text, icons, and interactivity. Use the border method for simple decorative shapes or backgrounds where no inner content is required; it’s very lightweight but lacks a real content box and is less flexible.

Quick Customizations

Adjust the trapezoid’s angles by changing the clip-path polygon percentages (e.g., bring 20%/80% closer for steeper sides). For an outline or shadow around the clipped shape, note:

  • outline draws a rectangle around the element’s box, not along the trapezoid edges.
  • Outer box-shadows are clipped by clip-path and won’t appear outside the trapezoid. For a soft halo that follows the clipped edges, use filter: drop-shadow(offset-x offset-y blur-radius color). There is no “spread” parameter, so drop-shadow cannot create a crisp, uniform stroke.
  • For a true “stroke” that follows the edges, use a wrapper or pseudo-element with the same clip-path and a slightly larger size, or switch to SVG for a real stroke.
/* Soft halo that follows the clipped edges */
.trapezoid.outline {
  filter: drop-shadow(0 0 4px #333);
}

/* Inner depth */
.trapezoid.inner-depth {
  box-shadow: inset 0 8px 12px rgba(0,0,0,0.25);
}

Accessibility & SEO

If the trapezoid conveys meaning (e.g., a callout), prefer real, visible text inside it. If it’s a non-interactive graphic without text, add role=”img” aria-label=”…” so screen readers understand it. For purely decorative shapes, use aria-hidden=”true”. Also note that aria-label does not affect SEO, search engines rely on actual page text.