CSS Skewで平行四辺形を作成する

形状エフェクトのSkew Transform

skewX()とskewY()関数は、要素のバウンディングボックスに影響を与えずに、水平または垂直軸に沿って要素を傾け、平行四辺形のような形状を作成します。

CSS

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

/* 内部コンテンツのskewを解除 */
.parallelogram > * {
  transform: skewX(15deg);
}

Skewの理解

• skewX(angle) — 要素を水平方向に傾けます。正の値は上部を右に押します。
• skewY(angle) — 要素を垂直方向に傾けます。正の値は左側を下に押します。
• 両方を組み合わせるとひし形のような歪みが生まれます。

Unskewパターン

一般的なテクニックは、コンテナをskewしつつ子要素をunskewしてコンテンツの可読性を保つことです：

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

.nav-link span {
  display: inline-block;
  transform: skewX(12deg); /* 親のskewを反転 */
}

実用的な制限

可読性のためにskew角度は控えめに（30度以下）してください。極端なskew値はコンテンツを大きく歪め、テキストが読めなくなることがあります。Unskewパターンは助けになりますが、マークアップの複雑さが増します。