クリップパスとは

要素を指定した図形の形に切り抜いて表示する CSS プロパティ。斜めのセクション区切りや円形・多角形の切り抜きに使う。

概要

CSS の clip-path プロパティを使って、要素を四角形以外の図形の形に切り抜いて表示する技法です。多角形（polygon）で斜めに区切ったセクション、円形（circle）に切り抜いた画像、四角形からくり抜く（inset）表現などに使われます。画像そのものを加工せず CSS だけで見た目を変えられるのが利点です。

別名

表記ゆれ：クリップパス、図形切り抜き、斜めセクション、clip-path

セクションの区切りに使う場合は「斜めセクション」という言い方もよくされます。

AI への伝え方

「セクションの境目を斜めに切ってほしい」「画像を丸く切り抜いて」のように、切り抜きたい形を具体的に伝えると clip-path の値（polygon か circle か）が決まります。座標を細かく指定する polygon は数値を少し変えるだけで形が崩れやすいため、微調整は AI に任せて見た目を確認しながら進めると安全です。

似たパーツとの違い

「マスク」（mask-image）は画像やグラデーションを使って透明度を部分的に変える技法で、境界をぼかしたフェードアウトのような表現が得意です。クリップパスは境界がくっきりした図形での切り抜きに向いており、ぼかしのような中間的な透明度は表現できません。

デモ

斜め切りセクション

円形

多角形

コード

HTML

<div class="clippath-demo">
  <div class="clippath-demo__section clippath-demo__section--diagonal">斜め切りセクション</div>
  <div class="clippath-demo__row">
    <div class="clippath-demo__shape clippath-demo__shape--circle">円形</div>
    <div class="clippath-demo__shape clippath-demo__shape--polygon">多角形</div>
  </div>
</div>

CSS

.clippath-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  font-family: sans-serif;
  color: #ffffff;
}

.clippath-demo__section {
  padding: 32px 16px 48px;
  text-align: center;
  font-weight: 700;
  background: #0017c1;
}

.clippath-demo__section--diagonal {
  /* 左上・右上・右下・左下の順に座標を指定し、下辺だけ斜めにする(inset の代わりに全体を polygon で指定) */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.clippath-demo__row {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.clippath-demo__shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 90px;
  background: #666666;
  font-size: 13px;
}

.clippath-demo__shape--circle {
  /* 中心 (50%, 50%) から半径 50% の円で切り抜く */
  clip-path: circle(50% at 50% 50%);
}

.clippath-demo__shape--polygon {
  /* 六角形の頂点を座標で指定して切り抜く */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}