CSS clip-pathで図形を作る｜polygon・circle・切り抜き・アニメーションを解説

Webサイトのデザインで、画像を円形に切り抜いたり、ボックスの角を斜めに削ぎ落としたような形を見たことはないでしょうか。こうした「四角形ではない形」を、画像を加工せずにCSSだけで実現できるのがclip-pathです。本記事では、clip-pathとは何か、どんな図形が作れるのか、座標はどう指定するのかを順を追って解説します。

clip-pathとは何か

clip-path（クリップパス）とは、要素の「表示する範囲」を指定した形に切り抜くCSSのプロパティです。要素そのものの大きさやレイアウトは変わらず、指定した形の内側だけが見えて、外側は透明になって隠れるという仕組みです。マスキングテープで型を作って、その内側だけを見せるイメージに近いと言えます。

従来、円形や三角形などの形を作るには、画像をあらかじめ切り抜いて透過PNGとして書き出したり、borderの組み合わせで擬似的に三角形を作ったりといった工夫が必要でした。clip-pathを使えば、元の画像や要素はそのままに、CSS側だけで見た目の形を自由に変えられます。形を後から調整したくなっても、CSSの数値を書き換えるだけで済むのが大きな利点です。

clip-pathには、あらかじめ用意された基本図形関数（circle・ellipse・inset・polygon）を使う方法と、SVGのpathで複雑な曲線を指定する方法があります。まずは扱いやすい基本図形から見ていきましょう。なお、より有機的でなめらかな曲線の形を手早く用意したい場合は、SVG Blobジェネレーターのような専用ツールで形を生成する選択肢もあります。

基本の図形：circle・ellipse・inset

clip-pathで最もよく使うのが、関数を使った基本図形の指定です。代表的な3つを押さえておけば、多くのデザインに対応できます。

circle（円）

clip-path: circle(50%); と書くと、要素の中心を起点とした円形に切り抜かれます。括弧の中の値は半径で、circle(50% at 30% 40%) のように at を付けると、円の中心位置をずらすこともできます。プロフィール画像を丸く見せたいときの定番です。

ellipse（楕円）

clip-path: ellipse(40% 30% at 50% 50%); のように、横方向と縦方向の半径を別々に指定すると楕円になります。横長・縦長のバナーを柔らかい印象にしたいときに向いています。

inset（角丸の長方形）

inset() は、上・右・下・左から内側へどれだけ削るかを指定して長方形に切り抜く関数です。clip-path: inset(10% 20% 10% 20% round 16px); のように round を付ければ、角丸も指定できます。要素の縁を少しだけ内側にトリミングしたいときに便利です。

polygonと座標の指定

三角形や斜めカット、星形など、自由な多角形を作りたいときに使うのがpolygonです。これはclip-pathの中でもっとも応用範囲が広く、覚えておく価値があります。

polygonは、頂点の座標をカンマ区切りで順番に並べることで形を定義します。座標は X Y の組で、要素の左上を 0% 0%、右下を 100% 100% とした相対位置で指定するのが基本です。

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

上の例は、上辺の中央（50% 0%）、右下（100% 100%）、左下（0% 100%）の3点を結んだ三角形になります。点を増やせば四角形・五角形・星形と、いくらでも複雑な形が作れます。たとえば、ヘッダーの下辺を斜めにカットしたいなら、polygon(0 0, 100% 0, 100% 85%, 0 100%) のように下側の2点だけYをずらします。

• 頂点は時計回り（または反時計回り）に順番どおり並べるのが基本です。順番が入れ替わると意図しない交差した形になります。
• 座標には % のほか px も使えますが、レスポンシブ対応では % のほうが扱いやすいことが多いです。

頂点の座標を手で計算するのは大変なので、実務ではプレビューを見ながら点を動かせるジェネレーターを使うのが効率的です。形が決まったら、出力されたCSSをコピーして貼り付けるだけで済みます。

画像や要素を切り抜く

clip-pathは、img要素はもちろん、テキストや背景を含むdivなどのボックス要素にもそのまま適用できます。使い方は、対象の要素にclip-pathプロパティを書くだけです。

.photo { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

このように指定すると、画像の下辺が斜めにカットされた形で表示されます。重要なのは、切り抜かれて見えなくなった部分も、要素としての領域（レイアウト上の幅・高さ）は元のまま残るという点です。隣の要素は切り抜き前の矩形を基準に配置されるため、デザイン全体の見え方を確認しながら調整するとよいでしょう。

背景にグラデーションを敷いたボックスをclip-pathで切り抜くと、斜めの帯やリボンのような装飾を手軽に作れます。背景のグラデーション自体はCSSグラデーション生成ツールでコードを用意し、その要素にclip-pathを重ねるという組み合わせが定番です。背景パターンと形を分けて考えると、再利用しやすいパーツになります。

また、有機的でなめらかな曲線の切り抜きをしたい場合は、polygonの直線だけでは表現が難しくなります。そのときはSVG Blobジェネレーターで曲線の形を作り、SVGのpathとしてclip-pathに渡す方法が向いています。

ホバーで形を変えるアニメーション

clip-pathの魅力のひとつは、形そのものをアニメーションさせられることです。transitionと組み合わせれば、ホバーしたときにじわっと形が変わる演出が作れます。

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .3s ease; } .card:hover { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }

この例では、通常時は普通の長方形、ホバー時は下辺が斜めにカットされた形へと、0.3秒かけてなめらかに変化します。アニメーションを破綻なく動かすコツは、変化の前後で頂点の数（座標の個数）をそろえることです。点の数が違うと、ブラウザは中間の形をうまく補間できず、アニメーションがカクついたり一瞬で切り替わったりします。

たとえば三角形（3点）から四角形（4点）へ変化させたい場合は、三角形側でも見た目には影響しない位置に4点目を重ねて置くなど、点の数を合わせる工夫をします。少し手間ですが、この一点を意識するだけで、形のアニメーションは格段に安定します。

対応状況とフォールバック

clip-pathは現在、主要なモダンブラウザ（Chrome・Edge・Firefox・Safari）で広くサポートされており、基本図形関数もpolygonも問題なく利用できます。ごく一部の古いブラウザではプレフィックス（-webkit-）が必要だった時期もありますが、現在の環境では標準のプロパティだけでほぼ動作します。

とはいえ、clip-pathに対応していない環境では「切り抜きが効かず、元の矩形のまま表示される」のが基本の挙動です。これは多くの場合、デザインが少し素っ気なくなるだけで内容は読めるため、装飾目的であれば大きな問題にはなりません。重要なのは、clip-pathで隠れる部分に、読めないと困る情報を置かないことです。テキストや重要なボタンが切り抜きで欠けないよう、安全な余白の内側に収める設計を心がけましょう。

• 装飾的な形であれば、未対応時に矩形で表示されても許容できる設計にしておく。
• 切り抜きの境界ぎりぎりに重要な要素を置かず、余裕を持たせる。
• 古い環境を強く意識する場合は、対応状況を公式の互換性情報で確認しておく。

clip-pathは、画像を加工せずCSSだけで自由な形を作れる、デザインの表現力を大きく広げるプロパティです。まずは三角形や斜めカットといったシンプルな形から試し、慣れてきたらCSSグラデーション生成ツールで作った背景や、SVG Blobジェネレーターの曲線と組み合わせてみてください。手を動かして形が変わる様子を見ることが、理解への近道です。

なお本記事は一般的な情報の提供を目的としたものです。ブラウザの対応状況や仕様は変わることがあるため、実装にあたっては最新の公式ドキュメントや互換性情報を確認したうえで判断してください。