【CSS初心者向け】clip-pathの使い方完全ガイド!自由自在に図形を作る方法

2025年10月28日

CSSで要素を円形や三角形、複雑な図形に切り抜きたいと思ったことはありませんか?

clip-pathプロパティを使えば、画像やボックスを好きな形に切り抜くことができます。

本記事では、clip-pathの基本的な使い方を、初心者の方にもわかりやすく丁寧に解説します。

実際のデモと実装コードを見ながら、clip-pathの魅力を体感していきましょう。

おねしゃす

clip-pathとは?基本を理解しよう

clip-pathは、CSSで要素を指定した形状に切り抜く(クリッピング)ためのプロパティです。

従来はborder-radiusで円形にする程度しかできませんでしたが、

clip-pathを使えば三角形、多角形、円、楕円など、さまざまな形状を自由に作ることができます。

例えば、以下のように記述します。

CSS

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

CSS

この記述だけで、要素が円形に切り抜かれます。

実際にはこんな感じ↓

See the Pen clip-path-circle by WEB-DEN (@Yukiwebcreate) on CodePen.

画像のトリミングやデザインのアクセントとして、モダンなWebサイトでよく使われている技術です。

clip-pathのメリット

JavaScriptなしで図形を作成できる
レスポンシブデザインに対応しやすい
アニメーションとの組み合わせが可能
画像編集ソフトを使わずにブラウザ上で完結

clip-pathで使える基本的な関数

clip-pathには、いくつかの基本的な関数が用意されています。それぞれの特徴と使い方を見ていきましょう。

circle() – 円形に切り抜く

circle()関数は、要素を円形に切り抜きます。

CSS

.circle-example {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: circle(50%);
}

CSS

引数には半径を指定します。circle(50%)は要素の50%の半径で円を作ります。

circle(100px at 50% 50%)のように、中心位置も指定できます。

ellipse() – 楕円形に切り抜く

ellipse()関数は、楕円形を作成します。

CSS

.ellipse-example {
  width: 300px;
  height: 200px;
  background: #e74c3c;
  clip-path: ellipse(40% 50%);
}

CSS

最初の値が横方向の半径、2番目の値が縦方向の半径です。

polygon() – 多角形を作成

polygon()関数は、複数の座標点を指定して多角形を作ります。

三角形、四角形、星形など、自由な形状が可能です。

CSS

/* 三角形 */
.triangle {
  width: 200px;
  height: 200px;
  background: #2ecc71;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 星形 */
.star {
  width: 200px;
  height: 200px;
  background: #f39c12;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
}

CSS

座標はパーセンテージまたはピクセルで指定でき、左上が(0%, 0%)、右下が(100%, 100%)となります。

inset() – 内側に切り抜く

inset()関数は、要素の内側から矩形で切り抜きます。marginの逆のようなイメージです。

CSS

.inset-example {
  width: 300px;
  height: 200px;
  background: #9b59b6;
  clip-path: inset(20px 30px 40px 50px round 20px);
}

CSS

値は上、右、下、左の順で指定し、roundキーワードの後に角丸の値を指定できます。

実践デモ:基本図形のサンプル集

それでは、実際に動くデモで確認してみましょう。

以下のコードは、さまざまなclip-pathの形状を並べたサンプルです。

See the Pen clip-path-basis by WEB-DEN (@Yukiwebcreate) on CodePen.

このデモでは、circle、ellipse、polygonを使った6種類の図形を表示しています。

ホバーすると拡大するアニメーションも追加しているので、インタラクティブな表現が可能です。

実践的な使用例とアニメーション

clip-pathの真価は、実際のWebデザインで活用したときに発揮されます。

ここでは、実践的な使用例をいくつか紹介します。

画像のホバーエフェクト

See the Pen shape-function-hover by WEB-DEN (@Yukiwebcreate) on CodePen.

このコードでは、ホバー時に円形の画像が拡大するエフェクトを実現しています。

transitionプロパティと組み合わせることで、スムーズなアニメーションが可能です。

セクションの装飾的な背景

See the Pen shape-hero-section by WEB-DEN (@Yukiwebcreate) on CodePen.

この例では、ヒーローセクションの下部を斜めに切り取ることで、モダンで動的なデザインを作っています。

アニメーションでの活用

See the Pen shape-animation01 by WEB-DEN (@Yukiwebcreate) on CodePen.

この例では、円形から菱形に変形するアニメーションを作成しています。

clip-pathはアニメーション可能なプロパティなので、創造的な表現が広がります。

clip-path使用時の注意点とブラウザ対応

clip-pathは非常に便利ですが、使用する際にはいくつかの注意点があります。

ブラウザ対応状況

clip-pathの基本的な関数(circle、ellipse、polygon、inset)は、主要なモダンブラウザでサポートされています。

本番環境で使用する際は、Can I useで最新の対応状況を確認することをおすすめします。

パフォーマンスへの配慮

clip-pathは描画処理に影響を与えるため、

複雑な図形を大量に使用するとパフォーマンスが低下する可能性があります。

特にアニメーションと組み合わせる場合は、以下の点に注意しましょう。

必要最小限の要素にのみ適用する
will-changeプロパティで最適化のヒントを与える
transform: translate()との組み合わせでGPUアクセラレーションを活用する

CSS

.optimized-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  will-change: clip-path;
  transform: translateZ(0); /* GPUアクセラレーションを有効化 */
}