transform: skew() と何が違う？

skewは要素ごと中身（テキスト）も傾きます。clip-pathは外形だけを平行四辺形に切り抜くため、中のテキストは傾かずまっすぐ表示できます。

斜めボタンで文字が切れます

左右の傾き分だけ内側が削れるため、padding-left / padding-right を多めにとると文字が切れません。

CSS 平行四辺形の作り方｜clip-pathで斜めの図形・ボタン（コピペ）

平行四辺形は clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%) で作れます。transform: skew() と違い中のテキストは傾かずまっすぐのまま、外形だけ斜めにできます。スポーティな斜めボタンや見出しに使えます。下にコピペ用コードを用意しました。

右傾き

BUTTON

CSS

.parallelogram {
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  -webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

左傾き

BUTTON

CSS

.parallelogram-left {
  clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
  -webkit-clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}

ポイントと注意点

skew との違い：clip-path は外形だけ切り抜くので中身のテキストは傾きません。文字を読みやすく保てます。
文字の余白：傾き分だけ内側が削れるので、padding を左右に多めにとると文字が切れません。
傾きの強さ：頂点の 25% / 75% を変えると角度が変わります。微調整は clip-path ジェネレーターの「平行四辺形」プリセットが便利です。

右傾き

CSS

左傾き

CSS

ポイントと注意点

関連