How to Make a Parallelogram with CSS

Learn two reliable ways to create a clean CSS parallelogram: with a simple skew transform or with a precise clip-path polygon. Both are lightweight, responsive-friendly options for buttons, badges, and hero accents.

Live Preview: Parallelogram

Method 1: Using transform: skewX()

.parallelogram {
  width: 160px;
  height: 110px;
  background: #cd5454;
  /* Negative angle leans left; positive angle leans right */
  transform: skewX(-20deg);
  transform-origin: left center;
}

.parallelogram {
  width: 160px;
  height: 110px;
  background: #cd5454;
  /* Negative angle leans left; positive angle leans right */
  transform: skewX(-20deg);
  transform-origin: left center;
}

Method 2: Using clip-path: polygon()

.parallelogram {
  width: 160px;
  height: 110px;
  background: #cd5454;
  /* Points define a right-leaning parallelogram */
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

.parallelogram {
  width: 160px;
  height: 110px;
  background: #cd5454;
  /* Points define a right-leaning parallelogram */
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

How This Works

The skewX() method visually slants a regular rectangle along the X axis to produce a parallelogram. Negative angles lean left; positive angles lean right. It’s fast and widely supported, and using the explicit skewX() form offers maximum compatibility (older browsers only recognize skewX()/skewY(), not skew()). Note that skewing also affects child content unless you apply an opposite skew to an inner wrapper.

The clip-path method keeps the element’s content upright because it clips the element to a polygonal shape instead of distorting it. You specify four points to form the parallelogram; everything inside remains undistorted.

How to Center Content Inside a Parallelogram

The easiest way is to use Flexbox or Grid. If you used transform: skewX() for the shape, add a child wrapper and apply the opposite skew to keep text upright.

Method 1: Use CSS Flexbox

.parallelogram {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional: if the shape uses transform: skewX(-20deg), unskew content */
.parallelogram > .content {
  transform: skewX(20deg);
}

.parallelogram {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional: if the shape uses transform: skewX(-20deg), unskew content */
.parallelogram > .content {
  transform: skewX(20deg);
}

Method 2: Use CSS Grid

.parallelogram {
  display: grid;
  place-items: center;
}

/* Optional: if the shape uses transform: skewX(-20deg), unskew content */
.parallelogram > .content {
  transform: skewX(20deg);
}

.parallelogram {
  display: grid;
  place-items: center;
}

/* Optional: if the shape uses transform: skewX(-20deg), unskew content */
.parallelogram > .content {
  transform: skewX(20deg);
}

When to Use Each Shape Method

Use transform: skewX() when you want the simplest, most compatible approach and don’t mind counter-skewing inner content. Use clip-path when you need pixel-precise edges and want text or icons inside to remain undistorted without extra wrappers.

Quick Customizations

Change the color with background: yourColor; and adjust the angle by tweaking skewX() or the polygon points (e.g., 15% instead of 20%). For a crisp border that follows a clip-path shape, create a pseudo-element (or wrapper) that shares the same clip-path and is slightly inset/outset; or use SVG for a true stroke. Box-shadow can suggest an edge but won’t be a perfectly crisp, matching border.

Accessibility & SEO

• Ensure sufficient color contrast for any text inside the shape.
• If the shape is purely decorative, add aria-hidden=”true” (don’t add role=”img”).
• If the shape conveys information and has no visible text, role=”img” with an aria-label is appropriate.
• If it’s interactive (e.g., a button), use a semantic button or appropriate role and include accessible text; don’t use role=”img”.