CSS 台形の作り方

clip-path で台形シェイプを作るコードを、実物プレビュー付きでコピーできます。

台形は clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%) で作れます。上辺の頂点を内側に寄せると上がせまい台形になります。タブやボタン、見出しの背景に使えます。下にコピペ用コードを用意しました。

上がせまい台形

CSS

.trapezoid {
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

下がせまい台形

CSS

.trapezoid-down {
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

ポイントと注意点

傾き：上辺の頂点（20%・80%）を内側に寄せるほど急になります。0%・100% で長方形に戻ります。
タブ見出し：上がせまい台形はファイルタブやセクション見出しの背景に向いています。
微調整は clip-path ジェネレーターの「台形」プリセットから頂点をドラッグできます。

関連