【CSS】clip-pathの使い方！polygon、inset、circleなどの値について解説

CSSのclip-pathは、要素を任意の形で切り抜くことができる便利なプロパティです。

画像や背景、カードUIなどを複雑な形で切り取ることができ、モダンなWebデザインでは欠かせない存在になっています。

この記事では、clip-pathの基本から実践的な使い方、注意点までを分かりやすく解説します。

clip-pathとは？

clip-pathは、要素の表示領域を指定した形状で切り抜くCSSプロパティです。

element {
  clip-path: ...;
}

切り抜かれた外側の部分は完全に非表示になり、レイアウト上も存在しない扱いになります。

よく使われる基本形状

ここでは、clip-pathでよく使われる値を紹介していきます。

polygon（多角形）

最も自由度が高く、デザイン性の高い形状を作れます。

polygonでは、x座標とy座標を指定して、指定された点で囲まれた部分で切り抜かれます。

.card {
  clip-path: polygon(
    x y,
    x y,
    x y
  );
}

x,y座標はpxや%などの値で指定します。calc関数を使うことも可能です。

<div class="container">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.box1,
.box2 {
  width: 80px;
  height: 50px;
  background-color: #000;
}
.box1 {
  clip-path: polygon(
    0 0,
    100% 0,
    50px 100%,
    0 100%
  );
}
.box2 {
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 20px) 50%, 
    100% 100%,
    0 100%
  );
}

Preview

自由に座標を指定して切り抜けるので、複雑な形状を表現することができます。

inset（四角形）

.box {
  clip-path: inset(20px 10px);
}

clip-path: inset(); を使うと、要素を四角で切り抜くことができます。

上記のコードでは、上下20px、左右10px分切り抜かれた四角形になります。

inset()の値が1つの場合、上下左右に適用されます。

<div class="container">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
  <div class="box3">
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.box1,
.box2,
.box3 {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.box2 {
  clip-path: inset(10px 10px);
}
.box3 {
  clip-path: inset(5px round 8px);
}

Preview

上下左右から内側に切り取る
border-radiusのような感覚で使える

角丸も指定できます。

clip-path: inset(20px round 10px);

circle（円形）

.avatar {
  clip-path: circle(50% at 50% 50%);
}

円形アイコンやプロフィール画像に最適
atで中心位置を指定可能

ellipse（楕円）

.image {
  clip-path: ellipse(60% 40% at 50% 50%);
}

円を横長・縦長にした形状です。

clip-pathの値一覧

CSSの clip-path プロパティで使用できる値を、機能別に整理して表にまとめました。

大きく分けて「基本シェイプ関数」「SVG/画像参照」「ボックスモデル（ジオメトリボックス）」の3つのカテゴリがあります。

基本シェイプ関数（最もよく使います）

要素を指定した形に切り抜くための関数です。

値 (関数)	効果・特徴	記述例
`inset()`	長方形（インセット）上下左右の内側への距離を指定します。`round` をつけると角丸に切り抜けます。	`/* 上右下左 /` `clip-path: inset(10px 20px 10px 20px);` `/ 角丸にする場合 */` `clip-path: inset(10% round 20px);`
`circle()`	正円「半径 at 中心位置」で指定します。	`/* 中央に半径50pxの円 /` `clip-path: circle(50px at center);` `/ 左上(0,0)中心で幅の40%の円 */` `clip-path: circle(40% at 0 0);`
`ellipse()`	楕円「X半径 Y半径 at 中心位置」で指定します。	`/* 幅50% 高さ30% の楕円 */` `clip-path: ellipse(50% 30% at center);`
`polygon()`	多角形頂点の座標 (X Y) をカンマ区切りで複数指定します。三角形や星型など自由自在です。	`/* 三角形 /` `clip-path: polygon(50% 0, 100% 100%, 0 100%);` `/ 菱形 */` `clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);`
`path()`	パス（自由曲線） SVGのパスデータ（d属性）と同じ構文で、複雑な曲線を描けます。	`/* ハート型などの複雑な形 */` `clip-path: path('M10 10 H 90 V 90 H 10 L 10 10');`

外部リソース参照

HTML内に記述したSVGの形状を利用する場合に使います。

値	効果・特徴	記述例
`url()`	SVG要素の参照 HTML内の `<svg>` タグにある `<clipPath>` 要素のIDを指定します。	`clip-path: url(#my-clip-shape);`

ジオメトリボックス（参照ボックス）

切り抜きの基準となる枠（ボックス）を指定します。単体で使うことは少なく、シェイプ関数と組み合わせて使うか、SVG要素に対して使います。

値	効果・特徴	記述例
`margin-box`	マージン領域の端で切り抜く（border-radiusの影響を受ける）。	`clip-path: margin-box;`
`border-box`	ボーダー領域の端で切り抜く。	`clip-path: border-box;`
`padding-box`	パディング領域の端で切り抜く。	`clip-path: padding-box;`
`content-box`	コンテンツ領域の端で切り抜く。	`clip-path: content-box;`
`view-box`	SVGのビューポート（viewBox）を基準にする。	`clip-path: view-box;`

その他

値	効果・特徴	記述例
`none`	なしクリッピングを行いません（初期値）。	`clip-path: none;`

hoverアニメーションとの組み合わせ

clip-pathはアニメーション可能です。

<div class="card"></div>

.card {
  width: 100px;
  height: 100px;
  background-color: #000;
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 0.4s ease;
}

.card:hover {
  clip-path: circle(70% at 50% 50%);
}

Preview