Create a Parallelogram Shape with CSS Skew

Skew Transforms for Shape Effects

The skewX() and skewY() functions tilt an element along the horizontal or vertical axis, creating parallelogram-like shapes without affecting the element's bounding box.

The CSS

.parallelogram {
  transform: skewX(-15deg);
}

/* Unskew the inner content */
.parallelogram > * {
  transform: skewX(15deg);
}

Understanding Skew

• skewX(angle) — Tilts the element horizontally. Positive values push the top to the right.
• skewY(angle) — Tilts the element vertically. Positive values push the left side down.
• Combining both creates a rhombus-like distortion.

The Unskew Pattern

A common technique is to skew a container but unskew its children so the content remains readable:

.nav-link {
  transform: skewX(-12deg);
  padding: 8px 16px;
  background: #3b82f6;
}

.nav-link span {
  display: inline-block;
  transform: skewX(12deg); /* Reverse the parent's skew */
}

Practical Limits

Keep skew angles moderate (under 30 degrees) for readability. Extreme skew values distort content heavily and can cause text to become illegible. The unskew pattern helps but adds markup complexity.