CSS clip-pathで曲線を描く方法｜SVGのpath関数や波・角丸・吹き出しデザインまで完全ガイド

「CSSで曲線を描きたいけど、どうやって実現すればいいのかわからない…」 そんな悩みをお持ちではありませんか？

近年のWebデザインでは、直線的な要素だけでなく、曲線や波型など柔らかい表現が多く取り入れられるようになってきました。その中でも注目されているのが、CSSの clip-path プロパティ。要素を好きな形に“切り抜く”ことができるこのプロパティを使えば、コードだけで複雑なデザインも実現可能になります。

しかし一方で、

• clip-path の基本的な使い方しか知らない
• 曲線を作るにはどうすればいいのか分からない
• path()って何？SVGと何が関係あるの？
• そもそも効かないこともある…

など、戸惑う場面もあると思います。

この記事では、CSS初心者から中級者の方がclip-pathを活用して曲線デザインを作れるようになるように基礎から応用までをわかりやすく解説していきます。

「clip-pathってなんだか難しそう」と感じていた方も、この記事を読み終える頃には、自由自在に曲線デザインが扱えるようになっているはずです。 それでは、さっそく見ていきましょう！

clip-pathとは？基本の使い方と描画の仕組み

CSSの世界では、要素の見た目を自由に操作できる様々なプロパティが存在しますが、中でも「clip-path」は要素を自由な形状に切り抜くことができる強力なプロパティです。四角形や円形だけでなく、多角形や曲線など、複雑な形状まで表現できるため、モダンなWebデザインには欠かせない技術となっています。

clip-pathを一言で表すと「要素の表示領域を特定の形状に制限するプロパティ」です。写真の額縁や、cookie cutterのように、表示したい形だけを残して他を「切り取る」イメージで理解するとわかりやすいでしょう。

clip-path - CSS: カスケーディングスタイルシート | MDN

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

developer.mozilla.org

基本的な書き方はとてもシンプルです：

.element {
  clip-path: 図形関数(パラメータ);
}

clip-pathの基本構文と対応図形（polygon, circle, ellipseなど）

clip-pathで利用できる主な図形関数は以下の通りです：

1. inset() – 矩形（長方形・正方形）

四角形の切り抜きを作成します。上下左右からの距離を指定できます。

.box {
  clip-path: inset(10px 20px 30px 40px); /* 上 右 下 左 */
}

/* 正方形（全辺から同じ距離）の場合 */
.square {
  clip-path: inset(20px);
}

2. circle() – 円形

円形の切り抜きを作成します。半径と中心位置を指定します。

.circle {
  clip-path: circle(50px at center); /* 半径50px、中心位置 */
}

/* 中心をずらした円 */
.offset-circle {
  clip-path: circle(40% at 70% 30%); /* 要素の幅の40%の半径、右70%上30%の位置 */
}

3. ellipse() – 楕円

横半径と縦半径、中心位置を指定します。

.ellipse {
  clip-path: ellipse(100px 50px at center); /* 横半径100px、縦半径50px、中心位置 */
}

4. polygon() – 多角形

複数の点を指定して多角形を作成します。各点は x y の形式で指定し、カンマで区切ります。

/* 三角形 */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 六角形 */
.hexagon {
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

5. path() – SVGパス（曲線も可能）

SVGのパス命令を使用して、自由な形状（曲線を含む）を作成できます。

.curved-shape {
  clip-path: path('M 0,200 Q 200,0 400,200 V 400 H 0 Z');
}

実際に簡単な例を見てみましょう。例えば、画像を円形に切り抜く場合：

img.profile {
  width: 200px;
  height: 200px;
  object-fit: cover;
  clip-path: circle(50%); /* 要素の中心から50%の円で切り抜き */
}

これだけで、四角い画像が美しい円形のプロフィール画像に変わります。追加のDOMや複雑なコードが不要で、CSSのみで実現できるのが大きな魅力です。

clip-pathが効かないときの原因とチェックリスト

clip-pathを使ってみたのに、なぜか効果が表示されない…そんなとき、以下のチェックリストで原因を特定しましょう：

1.ブラウザ対応の問題
最新のブラウザではほぼ対応していますが、特に古いIEやEdgeの旧バージョンでは対応していません。特に path() 関数は比較的新しい機能でサポート範囲が限られます

2.プレフィックスの不足
古めのブラウザでは webkit-clip-path プレフィックスが必要な場合があります

.element {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

3.構文エラー
括弧や単位の書き忘れなど、小さなミスが多いです。
カンマの位置や数値の単位（pxや%）を確認しましょう。

4.要素サイズの問題
親要素や対象要素のサイズが0になっていると効果が見えません。
widthとheightが明示的に設定されているか確認しましょう。

5.絶対値と相対値の混同
例えば circle(50%) は要素の大きさに対する相対値ですが、circle(50px) は絶対値です。
意図に合わせて適切な単位を選びましょう。

6.z-indexの問題
clip-pathを適用した要素が他の要素に隠されていないか確認。
以下のような確認コードを使うと、clip-pathが機能しているかテストできます：

.test-element {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(50%);
}

この要素が円形に表示されれば、clip-pathの基本機能は問題なく動作しています。

clip-pathを使うときに注意すべきCSSのポイント（overflow, positionなど）

clip-pathを効果的に使うためには、いくつかの重要なCSSのポイントを押さえておく必要があります：

1. overflow プロパティとの関係

clip-pathはoverflow: hiddenと似た効果があるように見えますが、動作原理が異なります：

• overflow: hiddenは子要素のはみ出し部分を非表示にします
• clip-pathは要素自体の形状を変更します

両方を同時に使う場合は、意図した効果が得られるか注意深く確認しましょう。

.parent {
  overflow: hidden; /* 子要素のはみ出しを制限 */
}

.child {
  clip-path: circle(50%); /* 子要素自体を円形に */
}

2. position プロパティの影響

clip-pathは要素の位置決めには影響しません。つまり：

• 要素の実際の占有スペース（ボックスモデル）は変わらない
• クリックできる領域や他の要素との干渉は元の矩形のままです

視覚的には切り抜かれていても、インタラクションの観点では元の形状のままであることに注意が必要です。

.button {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  /* クリック可能な領域は依然として200px×200pxの正方形のまま */
}

この問題を解決するには、追加のJavaScriptか、以下のようなCSSハックが必要になります：

/* より良い方法: ポインターイベントを形状に合わせる */
.button {
  position: relative;
  width: 200px;
  height: 200px;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: circle(50%);
  background: transparent;
  pointer-events: auto;
}

.button {
  pointer-events: none; /* 元の四角形のクリックを無効化 */
}

3. アニメーション時の注意点

clip-pathはtransitionやanimationと組み合わせることができますが、いくつか制限があります：

• 同じ図形関数間でのみアニメーション可能（polygonからcircleへは直接遷移できない）
• 点の数が同じ場合のみアニメーション可能（4点から6点のpolygonへは直接遷移できない）

/* 良い例: 同じ図形関数、同じ点数 */
.element {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 1s ease;
}

.element:hover {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}

/* 動作しない例: 異なる図形関数 */
.bad-example {
  clip-path: circle(50%);
  transition: clip-path 1s ease;
}

.bad-example:hover {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 円から多角形へは直接遷移できない */
}

4. パフォーマンスへの配慮

複雑なclip-pathパターン（特に多数の点を持つpolygonやpathなど）は、レンダリングパフォーマンスに影響することがあります。モバイルデバイスやアニメーションを多用する場合は、シンプルな形状を心がけましょう。

---

clip-pathは、要素を単なる矩形から解放し、Webデザインに新しい創造性をもたらします。基本的な使い方を理解し、注意点を押さえれば、さまざまな表現が可能になります。次のセクションでは、もっと複雑な曲線を表現するためのtechniqueclip-path: path()について詳しく見ていきましょう。

曲線を描くには？clip-path + path()関数の使い方

前のセクションでは、clip-pathの基本的な使い方を見てきましたが、rectangle、circle、polygonだけでは表現できない自由な曲線を使ったデザインが必要なケースも多くあります。波線、流れるような形状、有機的なカーブなど、より複雑な形状を実現するには、clip-path: path()関数の力を借りる必要があります。

clip-path: path()とは？SVGパスとCSSの関係

clip-path: path()は、SVG（Scalable Vector Graphics）のパス記法をCSSで直接利用できるようにした機能です。この関数によって、直線だけでなく、ベジェ曲線などの滑らかなカーブを使った複雑な形状を表現できるようになります。

基本的な書き方はこのようになります：

.element {
  clip-path: path('SVGパスデータ');
}

ここで使用する「SVGパスデータ」は、SVG要素の<path>タグのd属性で使われる値と同じ構文です。つまり、clip-pathでは、SVGの強力なパス描画機能をCSSだけで利用できるようになったわけです。

重要なポイントとして、path()関数はブラウザの対応状況に注意が必要です。2023年時点で主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）では対応していますが、古いブラウザでは使えない場合があります。Can I Useなどで最新の対応状況を確認するとよいでしょう。

SVGのベジェ曲線とM、C、Lなどのパス命令の基礎

SVGパスは、ペンで紙に線を描くようなイメージで理解すると分かりやすいです。ペンの動きを一連の命令（コマンド）で表現し、それに従って線が描かれていきます。主要なパスコマンドは以下の通りです：

1. 移動コマンド

• M x y (Move to): ペンを指定の座標(x,y)に移動します（線を引かない）
• m dx dy: 現在位置から相対的に(dx,dy)だけ移動します

2. 直線コマンド

• L x y (Line to): 現在位置から(x,y)まで直線を引きます
• l dx dy: 現在位置から相対的に(dx,dy)の位置まで直線を引きます
• H x (Horizontal line): 現在位置からx座標だけ変えて水平線を引きます
• h dx: 現在位置から相対的にdx分だけ水平線を引きます
• V y (Vertical line): 現在位置からy座標だけ変えて垂直線を引きます
• v dy: 現在位置から相対的にdy分だけ垂直線を引きます

3. 曲線コマンド (ベジェ曲線)

• C x1 y1, x2 y2, x y (Cubic Bezier): 2つの制御点(x1,y1)と(x2,y2)を使って、終点(x,y)までの3次ベジェ曲線を描きます
• c dx1 dy1, dx2 dy2, dx dy: 相対的な3次ベジェ曲線
• S x2 y2, x y (Smooth Cubic Bezier): 前の曲線の終点を基準に、制御点(x2,y2)と終点(x,y)で滑らかな3次ベジェ曲線を描きます
• s dx2 dy2, dx dy: 相対的な滑らかな3次ベジェ曲線
• Q x1 y1, x y (Quadratic Bezier): 1つの制御点(x1,y1)と終点(x,y)で2次ベジェ曲線を描きます
• q dx1 dy1, dx dy: 相対的な2次ベジェ曲線
• T x y (Smooth Quadratic Bezier): 前の曲線の終点を基準に、終点(x,y)で滑らかな2次ベジェ曲線を描きます
• t dx dy: 相対的な滑らかな2次ベジェ曲線

4. 閉じるコマンド

• Z (Close Path): 現在位置から開始点まで直線を引いて閉じます
• z: 小文字でも同じ効果です

実際のパスデータは、これらのコマンドを組み合わせて構成されます。例えば、下記のパスは星形を描きます：

M 100,10 L 130,90 L 210,90 L 140,130 L 160,210 L 100,160 L 40,210 L 60,130 L -10,90 L 70,90 Z

ただし、曲線を含む形状は、このように手書きで作成するのは困難です。通常は、Adobe Illustratorなどのベクターグラフィックソフトや、オンラインのSVGエディタを使って作成したSVGパスデータをコピーして利用します。

よく使われる曲線パターンとそのパスコード例

実際に、よく使われる曲線パターンとそのパスコードを見てみましょう。これらを応用して、独自のデザインを作成することができます。

1. 波線パターン（Wave）

シンプルな波線は、Qコマンド（2次ベジェ曲線）を使うと簡単に作れます：

.wave-top {
  clip-path: path('M 0,50 Q 50,0 100,50 Q 150,100 200,50 Q 250,0 300,50 L 300,200 L 0,200 Z');
}

このパスは、横幅300px、高さ200pxの要素に対して、上部に波線を作ります。

2. 滑らかな曲線の角（Smooth Corner）

角を滑らかにするには、Cコマンド（3次ベジェ曲線）が適しています：

.smooth-corner {
  clip-path: path('M 0,100 C 0,50 50,0 100,0 L 200,0 C 250,0 300,50 300,100 L 300,200 L 0,200 Z');
}

このパスは、横幅300px、高さ200pxの要素に対して、上部の角を滑らかにします。

3. 雫型（Droplet）

雫型は、円と直線を組み合わせることで作れます：

.droplet {
  clip-path: path('M 100,0 C 150,0 200,50 200,100 C 200,150 150,200 100,200 C 50,200 0,150 0,100 C 0,50 50,0 100,0 Z');
}

このパスは、横幅200px、高さ200pxの雫型を作ります。

4. ハート型（Heart）

ハート型は、複数の曲線を組み合わせて作ります：

.heart {
  clip-path: path('M 100,30 C 60,10 0,50 0,100 C 0,150 50,180 100,200 C 150,180 200,150 200,100 C 200,50 140,10 100,30 Z');
}

5. 雲型（Cloud）

雲型は、複数の円弧を組み合わせることで表現できます：

.cloud {
  clip-path: path('M 25,100 C 25,70 50,50 80,50 C 90,30 110,20 135,20 C 160,20 180,30 190,50 C 220,50 245,70 245,100 C 245,130 220,150 190,150 C 180,170 160,180 135,180 C 110,180 90,170 80,150 C 50,150 25,130 25,100 Z');
}

これらのパスを直接使用することもできますが、実際には自分のデザインに合わせて調整が必要です。特に、パスの座標値は要素のサイズに合わせて調整する必要があることに注意してください。

CSSだけで曲線を描くことはできるのか？

「CSSだけで曲線を描くことはできるのか？」という質問に対する答えは「はい、できます」です。ただし、いくつかの制限と考慮点があります：

1. clip-pathによる方法

前述のように、clip-path: path()を使うことで、SVGのパス構文を利用して曲線を含む形状を作ることができます。これはまさに「CSSだけ」で曲線を描く方法です。

2. border-radiusによる方法

より単純な曲線なら、border-radiusプロパティを使って角を丸めることで、曲線を表現できます：

.rounded-box {
  width: 200px;
  height: 100px;
  border-radius: 50px;
  background: blue;
}

複雑な境界の場合は、border-radiusの8つの値（左上・右上・右下・左下のそれぞれx方向とy方向）を指定できます：

.complex-rounded {
  border-radius: 30px 70px 50px 20px / 60px 40px 30px 10px;
}

3. 疑似要素とtransformの組み合わせ

疑似要素（::before、::after）とtransformプロパティを組み合わせることで、特定の曲線効果を作り出すこともできます：

.curved-corner {
  position: relative;
  overflow: hidden;
}

.curved-corner::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: 0;
  right: 0;
  background: red;
  border-radius: 50%;
  transform: translate(50%, 50%);
}

4. グラデーションによる方法

radial-gradientやconic-gradientを使うことで、円形や放射状の曲線的な表現も可能です：

.radial-curve {
  background: radial-gradient(circle at 50% 0%, transparent 50px, blue 50px);
}

制限と考慮点

CSSだけで曲線を描く際の主な制限点は以下の通りです：

1. 複雑さの限界: 非常に複雑な曲線パターンは、CSSだけでは表現が難しい場合があります。
2. パフォーマンス: 複雑なclip-pathやmultiple box-shadowsは、レンダリングパフォーマンスに影響することがあります。
3. ブラウザ対応: 特にcustomizeした曲線（path関数など）は、ブラウザの対応状況を考慮する必要があります。
4. 維持管理: 複雑な曲線を作るためのCSSは、読みにくく維持管理が難しくなる傾向があります。

実践的なアプローチ

実際のプロジェクトでは、以下のアプローチが効果的です：

1. シンプルな曲線 → CSSだけで対応（border-radius, simple clip-path）
2. 中程度の複雑さ → clip-path: path()を使用
3. 非常に複雑な曲線 → SVG要素を使用（ブラウザ互換性やパフォーマンスが向上）

例えば、単純な波線パターンならCSSのclip-pathで十分ですが、詳細なイラストのような複雑な曲線なら、SVG要素を使用する方が適切でしょう。

/* シンプルな波線ならCSS clip-pathで十分 */
.simple-wave {
  clip-path: path('M 0,50 Q 50,0 100,50 Q 150,100 200,50 L 200,200 L 0,200 Z');
}

<!-- 複雑な曲線ならSVG要素の方が適切 -->
<svg viewBox="0 0 200 200">
  <path d="[複雑なパスデータ]" fill="blue" />
</svg>

clip-pathとpath()関数を使いこなすことで、CSSだけでも十分に多様な曲線表現が可能になります。特に、ウェブサイトのセクション区切りや、装飾的な要素、ユニークなボタンデザインなど、多くの場面で活用できるでしょう。

次のセクションでは、より実践的な応用例として、角丸や吹き出しをclip-pathでデザインする方法を見ていきます。

clip-pathで角丸・吹き出しをデザインする応用例

前のセクションではclip-path: path()を使って曲線を描く基本テクニックを学びました。このセクションでは、より実用的な応用例として、角丸や吹き出しなどのデザインをclip-pathで実現する方法を詳しく見ていきましょう。これらのテクニックは、モダンなWebデザインでよく使われる要素で、clip-pathを使うことで柔軟かつ軽量に実装できます。

inset()+roundで角丸を作る方法とサンプル

clip-pathのinset()関数には、あまり知られていない便利な機能があります。それはroundキーワードを使用して角を丸める機能です。これにより、border-radiusと似た効果をclip-pathで実現できます。

基本的な構文は次のようになります：

clip-path: inset(上 右 下 左 round 左上角-半径 右上角-半径 右下角-半径 左下角-半径);

実際に使ってみましょう：

.rounded-box {
  width: 300px;
  height: 200px;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);

  /* すべての角を20pxで丸める */
  clip-path: inset(0 0 0 0 round 20px);
}

.rounded-box-complex {
  width: 300px;
  height: 200px;
  background: linear-gradient(45deg, #a18cd1, #fbc2eb);

  /* 各角ごとに異なる半径を設定 */
  clip-path: inset(0 0 0 0 round 50px 20px 80px 10px);
}

inset()の引数について詳しく説明すると：

1. 最初の4つの値（上 右 下 左）は、要素のどの部分を「内側に切り取る」かを指定します。0 0 0 0は何も切り取らないことを意味します。
2. roundキーワードの後に続く値は、左上から時計回りに各角の丸みの半径を指定します。

ここで注目すべき点は、この方法が単純な角丸だけでなく、より複雑な形状も表現できることです：

.notched-card {
  width: 300px;
  height: 200px;
  background: #74ebd5;

  /* 上部に切り欠きを作る */
  clip-path: inset(20px 0 0 0 round 0 0 20px 20px);
}

.ticket-stub {
  width: 300px;
  height: 150px;
  background: #6a11cb;

  /* チケットのような波状の切り取り */
  clip-path: inset(0 10px 0 10px round 40px 40px 40px 40px);
}

inset() + roundの大きな利点は、ブラウザの互換性が良いことです。path()関数よりも広いブラウザでサポートされているため、角丸デザインを実装する際の第一選択肢として検討する価値があります。

角丸三角形をclip-pathで作るテクニック

角丸三角形は、特にバッジやラベル、ナビゲーション要素などでよく使われるデザイン要素です。通常の三角形はpolygon()で簡単に作れますが、角を丸めるにはいくつかのテクニックが必要です。

方法1：path()関数を使う方法

最も柔軟な方法はpath()関数を使用することです：

.rounded-triangle {
  width: 200px;
  height: 200px;
  background: #f6d365;

  /* 角丸三角形 */
  clip-path: path('M 20,0 L 180,0 Q 200,0 200,20 L 200,180 Q 200,200 180,200 L 100,200 L 20,200 Q 0,200 0,180 L 0,20 Q 0,0 20,0 Z');
}

この例では、座標(0,0)から(200,200)までの領域に、角が丸い三角形を描いています。各角にはQ（2次ベジェ曲線）コマンドを使用して丸みを付けています。

方法2：小さなpolygon()でシミュレーションする方法

完全な角丸ではありませんが、多くの点を使ったpolygon()で角丸をシミュレートすることもできます：

.pseudo-rounded-triangle {
  width: 200px;
  height: 180px;
  background: #fdbb2d;

  /* 点を多く取ることで擬似的に角丸に */
  clip-path: polygon(
    10% 0%, 90% 0%, 100% 10%,
    100% 90%, 90% 100%, 50% 100%,
    10% 100%, 0% 90%, 0% 10%
  );
}

これは完全な曲線ではありませんが、視覚的には角丸三角形のように見えます。ブラウザの互換性が懸念される場合は、この方法も検討する価値があります。

CSSだけで吹き出しをclip-pathでデザインする方法

吹き出し（スピーチバブル）は、対話型UIやコメントシステム、チュートリアルなどでよく使われるデザイン要素です。従来は、複数の要素や疑似要素を組み合わせて実装されることが多かったですが、clip-pathを使えば単一要素でシンプルに実現できます。

基本的な吹き出し

まずは基本的な吹き出しを作ってみましょう：

.speech-bubble {
  width: 300px;
  height: 150px;
  background: #00b09b;
  position: relative;

  /* 基本形状に小さな三角形の突起を追加 */
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%,
    75% 75%, 75% 100%, 50% 75%,
    0% 75%
  );
}

この例では、基本的な矩形の下部に小さな三角形の「尻尾」を追加しています。吹き出しの尻尾の位置を変えるには、座標を調整します：

/* 右向きの吹き出し */
.speech-bubble-right {
  clip-path: polygon(
    0% 0%, 75% 0%, 75% 25%,
    100% 50%, 75% 75%, 75% 100%,
    0% 100%
  );
}

/* 上向きの吹き出し */
.speech-bubble-top {
  clip-path: polygon(
    0% 25%, 50% 0%, 100% 25%,
    100% 100%, 0% 100%
  );
}

角丸の吹き出し

より洗練された見た目にするために、角丸の吹き出しを作ることもできます。これにはpath()関数を使用します：

.rounded-speech-bubble {
  width: 300px;
  height: 150px;
  background: #355c7d;

  /* 角丸の吹き出し */
  clip-path: path(
    'M 20,0 L 280,0 Q 300,0 300,20 L 300,100 Q 300,120 280,120 L 170,120 L 150,150 L 130,120 L 20,120 Q 0,120 0,100 L 0,20 Q 0,0 20,0 Z'
  );
}

この例では、矩形の各角に曲線を適用し、下部に三角形の尻尾を追加しています。座標を調整することで、尻尾の位置や大きさを変更できます。

雲形の吹き出し

より創造的なデザインとして、雲形の吹き出しも実装できます：

.cloud-speech-bubble {
  width: 300px;
  height: 150px;
  background: #7474BF;

  /* 雲形の吹き出し */
  clip-path: path(
    'M 25,30 C 25,15 40,5 55,5 C 70,0 85,0 100,5 C 115,0 130,0 145,5 C 160,5 175,15 175,30 C 190,30 200,45 200,60 C 200,75 190,90 175,90 L 175,90 L 120,90 L 100,120 L 80,90 L 25,90 C 10,90 0,75 0,60 C 0,45 10,30 25,30 Z'
  );
}

この例では、複数の曲線を組み合わせて雲のような形状を作り、下部に小さな三角形を追加しています。

複数のclip-pathを切り替えて使い分けるTips

単一のデザインだけでなく、ユーザーインタラクションやアニメーションに応じて複数のclip-pathを切り替えたい場合があります。ここでは、そのためのいくつかのテクニックを紹介します。

1. ホバーエフェクト

ホバー時にclip-pathを変更することで、インタラクティブな効果を作れます：

.hover-morph {
  width: 200px;
  height: 200px;
  background: #FF416C;
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 0.5s ease-in-out;
}

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

この例では、ホバー時に円が拡大します。同様の原理で、形状を完全に変更することも可能です：

.shape-shifter {
  width: 200px;
  height: 200px;
  background: #8A2387;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: clip-path 0.5s ease-in-out;
}

.shape-shifter:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

ただし、前述のように異なる図形関数間（例：polygonからcircleへ）の直接的な遷移はアニメーションされません。

2. メディアクエリによる切り替え

レスポンシブデザインでは、画面サイズによってclip-pathを切り替えることができます：

.responsive-shape {
  width: 100%;
  height: 300px;
  background: #84fab0;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

@media (max-width: 768px) {
  .responsive-shape {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
}

この例では、デスクトップではより複雑な形状を使用し、モバイルではシンプルな形状に切り替えています。

3. カスタム属性とJavaScript

より複雑な状態管理が必要な場合は、JavaScriptとカスタムデータ属性を組み合わせることができます：

<div class="multi-shape" data-shape="circle"></div>

.multi-shape {
  width: 200px;
  height: 200px;
  background: #654ea3;
  transition: clip-path 0.5s ease-in-out;
}

.multi-shape[data-shape="circle"] {
  clip-path: circle(40% at 50% 50%);
}

.multi-shape[data-shape="square"] {
  clip-path: inset(10% 10% 10% 10%);
}

.multi-shape[data-shape="triangle"] {
  clip-path: polygon(50% 10%, 90% 90%, 10% 90%);
}

// JavaScriptで状態を切り替える
const shape = document.querySelector('.multi-shape');
let shapes = ['circle', 'square', 'triangle'];
let currentIndex = 0;

shape.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % shapes.length;
  shape.dataset.shape = shapes[currentIndex];
});

この方法では、要素をクリックするたびに3つの形状を循環していきます。

4. CSSアニメーションでの活用

keyframesアニメーションを使用して、複数のclip-pathを順番に切り替えることもできます：

@keyframes morph {
  0% {
    clip-path: circle(40% at 50% 50%);
  }
  33% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  66% {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  100% {
    clip-path: circle(40% at 50% 50%);
  }
}

.morphing-shape {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #fc5c7d, #6a82fb);
  animation: morph 8s infinite;
}

ただし、先に説明したアニメーションの制限（同じ図形関数間、同じ点数のみ）があるため、スムーズな遷移が必要な場合は注意が必要です。滑らかなアニメーションを実現するには、同じ図形関数で点の数を合わせる必要があります。

このセクションでは、clip-pathを使った角丸や吹き出しのデザイン方法を学びました。これらのテクニックを応用することで、従来よりも少ないコードでモダンで創造的なデザインを実現できます。また、複数のclip-pathを切り替えるテクニックを使うことで、インタラクティブで動的なエフェクトも作成できます。

次のセクションでは、実際のWebサイトで使える具体的なサンプルコードを見ていきましょう。

実用サンプルコード集｜コピペOK！曲線デザイン7選

これまでの理論と基本テクニックを踏まえ、実際のWebサイトで使えるclip-pathを使った曲線デザインのサンプルコードを紹介します。これらのコードはそのままコピー＆ペーストで使用でき、必要に応じてカスタマイズすることもできます。

曲線を使ったセクション切り替えデザイン

Webサイトのセクション間の切り替えに曲線を使うと、モダンで流れるような印象を与えることができます。以下に3種類の異なるセクション切り替えデザインを紹介します。

1. シンプルウェーブセパレーター

最もシンプルな波形のセパレーターです。セクション下部に適用することで、次のセクションへの自然な流れを作ります。

<section class="top-section">
  <div class="content">
    <!-- セクションの内容 -->
  </div>
</section>

<div class="wave-separator"></div>

<section class="bottom-section">
  <!-- 次のセクションの内容 -->
</section>

.top-section {
  background-color: #3494e6;
  padding: 100px 0;
  position: relative;
}

.wave-separator {
  height: 150px;
  background-color: #3494e6;
  position: relative;
}

.wave-separator::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 次のセクションの背景色 */
  clip-path: path('M 0,100 Q 250,0 500,100 Q 750,200 1000,100 L 1000,200 L 0,200 Z');
}

.bottom-section {
  background-color: #ffffff;
  padding: 100px 0;
}

このコードでは、波形のセパレーターを作成するために疑似要素とclip-path: path()を組み合わせています。Q（2次ベジェ曲線）コマンドを使って、滑らかな波線を描いています。

2. ダブルカーブセパレーター

より複雑で印象的な二重の曲線セパレーターです。

<section class="section-one">
  <div class="content">
    <!-- セクションの内容 -->
  </div>
  <div class="double-curve-separator"></div>
</section>

<section class="section-two">
  <!-- 次のセクションの内容 -->
</section>

.section-one {
  background-color: #6a11cb;
  padding: 100px 0 200px;
  position: relative;
}

.double-curve-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.double-curve-separator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  clip-path: path('M 0,200 Q 300,50 600,150 Q 900,250 1200,100 L 1200,200 L 0,200 Z');
}

.double-curve-separator::after {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 次のセクションの背景色 */
  clip-path: path('M 0,200 Q 200,80 400,150 Q 600,220 800,150 Q 1000,80 1200,150 L 1200,200 L 0,200 Z');
}

.section-two {
  background-color: #ffffff;
  padding: 100px 0;
}

このデザインでは、2つの異なる曲線を重ねることで深みと動きを作り出しています。::beforeと::afterの疑似要素を使い、異なる色と位置の曲線を表現しています。

3. スクロール対応ダイアゴナルカットセパレーター

斜めの切り替えに少し曲線を加えることで、モダンでダイナミックな印象を与えるセパレーターです。

<div class="diagonal-section">
  <div class="content">
    <!-- セクションの内容 -->
  </div>
</div>

<section class="next-section">
  <!-- 次のセクションの内容 -->
</section>

.diagonal-section {
  position: relative;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 100px 0 150px;
}

.diagonal-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #ffffff; /* 次のセクションの背景色 */
  clip-path: path('M 0,100 C 200,30 400,70 600,30 C 800,0 1000,40 1200,0 L 1200,100 L 0,100 Z');
}

.next-section {
  background-color: #ffffff;
  padding: 100px 0;
}

このデザインでは、C（3次ベジェ曲線）コマンドを使用して、よりなめらかで自然な曲線を作成しています。スクロールするとセクション間の切り替えがスムーズに見えます。

波型（ウェーブ）背景の作り方

波型の背景は、特にヒーローセクションやフッターなどで人気のデザインです。clip-pathを使って様々な波形パターンを作成できます。

4. マルチレイヤーウェーブ背景

複数の波形レイヤーを重ねることで、深みと動きのある背景を作ります。

<div class="wave-background">
  <div class="content">
    <h1>Welcome to our site</h1>
    <p>Discover amazing content</p>
  </div>
</div>

.wave-background {
  position: relative;
  height: 500px;
  background-color: #4158D0;
  overflow: hidden;
}

.wave-background::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(65, 88, 208, 0.7);
  clip-path: path('M 0,100 Q 150,180 300,100 Q 450,20 600,100 Q 750,180 900,100 Q 1050,20 1200,100 L 1200,500 L 0,500 Z');
  animation: wave 20s linear infinite;
}

.wave-background::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(65, 88, 208, 0.3);
  clip-path: path('M 0,100 Q 100,150 200,100 Q 300,50 400,100 Q 500,150 600,100 Q 700,50 800,100 Q 900,150 1000,100 Q 1100,50 1200,100 L 1200,500 L 0,500 Z');
  animation: wave 15s linear infinite reverse;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 200px;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1200px);
  }
}

このコードでは、2つの異なる波形レイヤーを作成し、それぞれに異なるアニメーションを適用しています。これにより、波が互いに交差するような動的な効果が生まれます。

5. インタラクティブホバーウェーブ

ユーザーインタラクションに反応する波形デザインです。ホバー時に波の形状が変化します。

<div class="hover-wave">
  <div class="content">
    <h2>Hover Me</h2>
  </div>
</div>

.hover-wave {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #06beb6;
  overflow: hidden;
  transition: background-color 0.5s ease;
}

.hover-wave::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.3);
  clip-path: path('M 0,100 Q 80,40 160,100 Q 240,160 320,100 Q 400,40 480,100 Q 560,160 640,100 Q 720,40 800,100 L 800,100 L 0,100 Z');
  transition: clip-path 0.5s ease, height 0.5s ease;
}

.hover-wave:hover {
  background-color: #48b1bf;
}

.hover-wave:hover::after {
  height: 150px;
  clip-path: path('M 0,100 Q 80,20 160,100 Q 240,180 320,100 Q 400,20 480,100 Q 560,180 640,100 Q 720,20 800,100 L 800,150 L 0,150 Z');
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 100px;
}

このデザインでは、ホバー時に波の高さと形状が変化します。これにより、ユーザーインタラクションに反応する動的な効果が生まれます。

曲線マスクで画像をくり抜く方法

画像に曲線マスクを適用することで、独自の視覚的効果を作り出すことができます。以下に2つの実用的な例を紹介します。

6. 有機的な形状のイメージマスク

自然な曲線を使って、画像に有機的なマスクを適用します。

<div class="organic-image">
  <img src="your-image.jpg" alt="Your description">
</div>

.organic-image {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin: 50px auto;
}

.organic-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: path('M 50,0 C 100,25 160,25 200,0 C 240,0 280,25 350,0 L 400,0 L 400,250 C 350,300 300,280 250,250 C 200,230 150,280 100,250 C 50,230 0,260 0,200 L 0,50 C 0,0 25,0 50,0 Z');
  transition: clip-path 0.5s ease;
}

.organic-image:hover img {
  clip-path: path('M 0,0 L 400,0 L 400,300 L 0,300 Z');
}

このコードでは、複雑な曲線パスを使用して画像に有機的な形状のマスクを適用しています。ホバー時には通常の矩形に戻るトランジションを追加することで、インタラクティブな要素も加えています。

7. 波状フレームギャラリー

波状の形状で画像をマスクし、ギャラリー風の表示を作成します。

<div class="wave-gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Gallery image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Gallery image 2">
  </div>
  <div class="gallery-item">
    <img src="image3.jpg" alt="Gallery image 3">
  </div>
</div>

.wave-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}

.gallery-item {
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: path('M 0,30 C 50,0 100,60 150,30 C 200,0 250,60 300,30 L 300,200 L 0,200 Z');
  transition: transform 0.5s ease, clip-path 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
  clip-path: path('M 0,0 C 50,15 100,0 150,15 C 200,30 250,15 300,0 L 300,200 L 0,200 Z');
}

このギャラリーデザインでは、各画像に波状のマスクを適用しています。ホバー時にはマスクの形状が変化し、同時に画像がわずかに拡大することで、動的な効果を生み出しています。

SVGを使わずcss変数を活用したレスポンシブ曲線

最後に、CSSカスタムプロパティ（変数）を使ってレスポンシブに対応する曲線デザインの例を紹介します。

<div class="responsive-curve-section">
  <div class="content">
    <h2>Responsive Curved Section</h2>
    <p>This section adapts to different screen sizes</p>
  </div>
</div>

:root {
  --curve-height: 100px;
  --color-primary: #ff6b6b;
  --color-secondary: #ffffff;
}

@media (max-width: 768px) {
  :root {
    --curve-height: 50px;
  }
}

.responsive-curve-section {
  position: relative;
  background-color: var(--color-primary);
  padding: 100px 0 calc(100px + var(--curve-height));
  text-align: center;
  color: white;
}

.responsive-curve-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--curve-height);
  background-color: var(--color-secondary);
  clip-path: path(
    'M 0,var(--curve-height) C 200,0 400,calc(var(--curve-height) * 2) 600,var(--curve-height) C 800,0 1000,calc(var(--curve-height) * 2) 1200,var(--curve-height) L 1200,var(--curve-height) L 0,var(--curve-height) Z'
  );
}

このコードでは、CSS変数を使用して曲線の高さを定義し、メディアクエリで画面サイズに応じて変数の値を変更しています。この方法では、レスポンシブデザインがより管理しやすくなります。

---

以上、7つの実用的な曲線デザインサンプルを紹介しました。これらのコードはそのままコピー＆ペーストで使用できますが、実際のプロジェクトに合わせて色やサイズ、形状を調整することをお勧めします。clip-pathの曲線機能を活用することで、モダンでユニークなWebデザインを簡単に実現できます。

特に、セクション区切りやバックグラウンドデザイン、イメージマスキングなどの領域で、これらのテクニックは非常に効果的です。ぜひ実際のプロジェクトに取り入れて、デザインの質を高めてみてください。

よくある質問（FAQ）

CSS の clip-path プロパティ、特に曲線に関する実装でつまずきやすいポイントについて、よくある質問をまとめました。実際の現場でよく遭遇する問題と解決策をご紹介します。

まとめ｜clip-pathで曲線デザインをもっと自由に

ここまで「CSS clip-path」と「曲線」について詳しく見てきましたが、いかがでしたか？最初は少し難しく感じるかもしれませんが、基本を理解すれば、Webデザインの可能性がぐっと広がりますよ。

特に覚えておきたいポイントをまとめると：

• clip-pathは単なる「切り抜き」ツールではなく、デザイン表現を豊かにする強力な武器です
• 曲線表現には主に「path()関数」を使い、SVGのパス構文を活用します
• 複雑な形状はSVGエディタで作成し、そのパスデータをCSSにコピーするのが効率的です
• ブラウザ互換性に注意し、必要に応じてフォールバック（代替表示）を用意しましょう

この記事で紹介したサンプルコードは、ぜひコピペして自分のプロジェクトでカスタマイズしてみてください。数値を少し変えるだけでも、まったく違った印象になりますよ。「この値を変えたらどうなるんだろう？」という好奇心を大切に、遊び心を持って実験してみることをおすすめします。

また、clip-pathによる曲線デザインは、単に見た目が面白いだけではありません。適切に使えばユーザー体験を向上させ、サイトの印象を大きく変えることができます。波型のセクション区切りや、有機的な形の画像フレームなど、ちょっとした工夫でサイト全体の印象がぐっと洗練されるでしょう。

clip-pathを使いこなせるようになれば、あなたのWebデザインのレパートリーが確実に広がります。従来のボックスモデルから抜け出し、もっと自由で創造的な表現が可能になるでしょう。

SVGで地図や図解をインタラクティブに！クリッカブルマップの実践例とテクニックを紹介

「svg クリッカブル マップ」の基本的な仕組みや画像マップとの違い、クリックできるエリアの作り方、レスポンシブ対応のテクニック、インタラクティブな演出方法、よくある不具合とその解決策、パフォーマンス最適化まで、初心者にもわかりやすく丁寧に解説しています。実用的な事例ととも、実装ノウハウが満載です。

watashi.xyz

2025.05.05