clip-path

背景・装飾

要素の表示領域を多角形や円形などで切り抜くプロパティです。

構文

Syntax

clip-path: <shape> | <url>

コード例

例 1

<!-- HTML -->
<div class="circle-clip">CIRCLE</div>

/* CSS */
.circle-clip {
  width: 120px;
  height: 120px;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(50% at 50% 50%);
}

実行結果

中央に円形で切り抜く（HTML+CSS例）

例 2

<!-- HTML -->
<div class="triangle-clip">TRIANGLE</div>

/* CSS */
.triangle-clip {
  width: 120px;
  height: 120px;
  background: #f59e42;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

実行結果

三角形に切り抜く（HTML+CSS例）

💡 TIPS

SVGやCSS Shapesと組み合わせると表現力が広がる。

ブラウザサポート

Chrome 55+, Firefox 54+, Safari 10+

clip-path

構文

コード例

例 1

例 2

💡 TIPS

関連プロパティ

ブラウザサポート