CSSのclip-pathプロパティを使用して画像の輪郭を自在に切り取る方法

clip-pathプロパティはベースとなる要素を切り取る事ができ、切り取り範囲に沿ってテキストの回り込みが発生します。

外周や円形、楕円形、多角形以外にもSVG画像を使えば複雑な形に切り取る事ができます。

基本的にリンク範囲も切り取りされた箇所に変化します。

clip-pathプロパティで要素を自在に切り抜く

CSSには「clip-path」というプロパティがあります。

このclip-pathプロパティを使用すると、基本四角形のデザインを自在にコントロールする事ができます。

clip-pathによって様々な形状が作成でき、その作成した形状以外の要素部分が切り取られます。

つまりCSSによって、〇円や△等の多角形の形状に画像を切り取る事ができる訳です。

基本は全てボックス構成

WEBページの要素は全て、基本的には長方形のボックス内に定義されていますよね。

画像を貼るにしても縦と横のサイズで構成しますし。ボックス要素も当然そうです。

だからと言って、常にこのボックス定義を守らなければならない訳ではありません。

CSSのclip-pathプロパティを使用すれば、画像やその他の要素の一部をクリップする事で、普段見慣れない視覚効果を演出できるのです。

※clip-pathのclipは「切り取る」意味で、以下「クリップする」と表現します。

clip-pathの特徴

clip-pathプロパティは、指定されたところ以外を切り取る機能です。

最初の例で使用された値はcircle()で、CSS仕様で定義されている基本的な形状値の1つです。

clip-pathの構成

HTMLソース

<div class="clip1"> <a href="#"><img src="../images/clip-path_img2.jpg" alt="気球"></a> <p>文章が入ります。</p> </div>

<div class="clip2"> <a href="#"><img src="../images/clip-path_img2.jpg" alt="気球"></a> <p>文章が入ります。</p> </div>

CSS

.clip1 img { max-width: 100%; margin: 10px; float: left; } .clip2 img { max-width: 100%; clip-path: circle(45%); shape-outside: circle(45%); shape-margin: 10px; float: left; }

サンプル

---

テキストの回り込み

clip-pathにより領域がクリップされ、その領域形状に沿ってテキストを折り返す事がで来ています。

これを実現しているのが「shape-outsideプロパティ」です。

円と同じ形状に余白を付けてデザイン

円と同じ形状にテキストが表示できる様、10pxのマージンを空けながら空間を切り取っているのですね。

この時テキストが折り返しされるのは、要素にfloatが適用されているためです。

clip-pathプロパティ以外に、別途float設定が必要になります。

リンクも領域に沿って作られる

クリップされた要素（img画像）に対してaタグでリンクを付けている場合、そのリンクもクリップした形状になります。

リンク範囲（カーソル指になるところ）が画像の円状に沿って作られているのがわかると思います。

clip-pathの形状の種類

基本的な形状には以下の様なものがあります。

inset()

inset()値は、要素の端からクリップされた領域を挿入し、上下左右の端の値を指定する事ができます。

border-radiusを使用すれば、クリップされた領域の四隅をカーブさせる事もできます。

HTMLソース

<div class="clip3"> 【clip3】通常のボックス </div> <div class="clip3 clip4"> 【clip4】端が消滅している </div>

CSS

.clip3 { background-color: #d7eaf9; padding: 20px; border: 20px solid #658aa7; width: 300px; height: 200px; display: inline-block; } .clip4 { clip-path: inset(10px 5px 10px 5px round 5%); }

display: inline-block;について

clip3ではdisplay: inline-block;を設定してdivのボックスを解除しています。

単に本記事でdivを左右に並べやすくしているだけで、clip-pathは独自に動きます。

端の切り抜きサンプル

clip3ボックスが通常の状態、次のボックスはinset()値を使用してクリップしています。

上右下左がそれぞれ10px 5px 10px 5pxずつ、さらにコーナーが5％丸く切り取られています。

見えないのではなく存在自体が消える

切り取られた部分は単に非表示になったのではなく、実質的に消えています。

ですのでその分、左の要素と比べて上部の間隔が狭くなっているのがわかると思います。

クリップによってその指定領域位階の存在が消える事になるのですね。

circle()

circle()値は、円形のクリップ領域を作成します。

最初の値には円の半径として長さ・またはパーセンテージの数値を入れ、2番目のオプション値で「円の中心位置」を設定できます。

HTMLソース

<div class="clip3"> 【clip3】通常のボックス </div> <div class="clip3 clip5"> 【clip5】円状に切り取り </div>

CSS

.clip3は前回と同じ .clip5 { clip-path: circle(80px at center center); }

正円サンプル

上記例は円の半径を80pxに指定し、オプション値のcenter centerで円を中央に設定しています。

半径はpx数値以外にパーセンテージを指定する事もできます。

画像範囲の外に見切れないように注意

円状にクリップする際に陥りやすいのが、平らなエッジが見えてしまう事です。

円が見切れた状態サンプル

これは切り取り対象となっている元のボックスが正方形ではなく「長方形」の場合に起こりやすくなります。

作成した正円の大きさが画像の自然なサイズの外側に広がる場合、上下に見切れ線が出てしまうのですね。

もちろん状況によっては左右が見切れる場合もあります。

正円は正方形の画像であれば問題なく切り取れると思いますが、長方形の場合は短いサイズ側に合わせる必要がありますね。

ellipse()

ellipse()は楕円形でcircle()とよく似ている形状です。

ellipse()にはxの半径とyの半径の値、次のオプションで楕円の中心の値を入れる事ができます。

ここからはhtmlソースは省きます。クラス名の「clip数値」部分が変わるだけで後は今までのものと同じです。

CSS

.clip7 { clip-path: ellipse(150px 80px at center 80px); }

楕円形サンプル

このサンプルでは左右は中心から、上から80pxの位置から150px×80pxの楕円が始まる様に指定しています。

polygon()

polygon()は、各ポイントの座標を設定する事で必要な数のポイントを定義して、多角形に切り取りできます。

複雑な形状を作成するのに役立ちます。

CSS

平行四辺形型 .clip8 { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); } 三角形 .clip8_2{ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } 五角形 .clip8_3{ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } 星形 .clip8_4{ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

多角形サンプル

clipジェネレーター「clippy」

polygon()を作成する際に手作りで多角形を計算する必要はありません。

clipジェネレーターである「Clippy」で簡単にCSSコードを生成する事ができます。

希望の多角形を選択して、画面下に表示されるclip-pathコードをコピーしてCSSに貼り付けるだけです。

ボックス値からの形状

CSSシェイプでは、ボックス値からのシェイプも定義されています。

これらはCSSボックスモデルに関連しています。

ボックス値の種類

これらの値はclip-pathと併用して形状のベースとなる「参照先ボックス」を定義するものです。

つまり切り抜き対象となる範囲を、マージンまで含めるかパディングやボーダーまで含めるか、という指定ですね。

CSS

.clip3 { background-color: #d7eaf9; padding: 20px; border: 20px solid #658aa7; width: 300px; height: 200px; display: inline-block; } .clip9 { clip-path: content-box; }

content-box切り抜きサンプル

clip3の指定ではpaddingが20pxあるのですが、clip9では「content-box」を設定しています。

本来clip9ではpadding分までが切り取られるはずですが、PCのブラウザでは変化はありません。

スマホなどで見ると、切り取られているのがわかります。

margin-box切り抜きサンプル

この例では正円でクリップし、参照ボックスとして「content-box」ではなく「margin-box」を使用していますが、先ほど同様にPCでは反映されません。

スマホでは、円状に切り取られているのがわかります。

CSS

.clip10 { clip-path: circle(45%) margin-box; }

ボックス値の仕様はサポート対象外

この様に、現在PCブラウザではclip-pathプロパティのボックス値の使用をサポートしていません。

今後のバージョンアップに期待したいところですね。

SVG要素の使用

基本的な形状よりもより細かくクリップ領域を制御するために「SVG」要素を使用する事ができます。

SVG画像の作成

まずはSVGのpathで複雑な図形を作ります。

HTMLソース

<svg height="0" width="0"> <clipPath id="test"> <path d="M24.6,-43.8C29.8,-39.6,30.7,-28.9,42.4,-20.5C54,-12.1,76.5,-6.1,83.8,4.2C91.1,14.5,83.1,28.9,73.3,40.5C63.5,52.1,59.8,60.7,39.2,59.2C26.7,57.7,13.4,46.1,-0.4,46.8C-14.2,47.5,-28.3,60.5,-41.2,62.2C-54,63.9,-65.6,54.2,-66.1,41.9C-66.5,29.7,-55.9,14.8,-56.4,-0.3C-57,-15.4,-68.6,-30.9,-65.8,-39C-62.9,-47.2,-45.6,-48.1,-32.2,-47.7C-18.9,-47.2,-9.4,-45.4,0.1,-45.6C9.7,-45.8,19.3,-48,24.6,-43.8Z" transform="translate(200 150)" /> </clipPath> </svg> <div class="container"> <img class="clip11" src="../images/clip-path_img2.jpg"><a href="#"><img src="../images/clip-path_img2.jpg"></a> </div>

画像のクラス名は「clip11」としています。

切り抜き対象としてSVGの形状を参照

上記の様にclippathのid="test"を設定し、CSSのclip-pathのurl()内でidの値を参照します。

CSS

.clip11 { clip-path: url(#test); }

SVG形状切り抜きサンプル

左の元画像を、右の様なSVG画像の形状に切り抜くことができます。

リンクはOK、回り込みはしない。

リンクもSVGの形状に沿ってくれているのがわかります。

ただし、このSVG画像のテキストの周りをshape-outside:で回り込みさせる事はできない様です。

クリップされた領域のアニメーション化

CSSトランジションとアニメーションを適用して、印象深い効果を演出できます。

円の半径を利用したアニメーション

この次の例では、半径値が異なる2つの円の間を遷移する事で、マウスオーバー時に円をアニメーション化しています。

HTMLソース

<div class="clip12"> <img src="../images/clip-path_img2.jpg" alt="気球"> </div>

CSS

.clip12 img{ max-width: 100%; clip-path: circle(45%); transition: clip-path 1s; } .clip12 img:hover { clip-path: circle(20%); }

アニメーションサンプル

マウスを合わせると半径45％の円が20％の円に縮小し、transition: clip-path 1s;で滑らかに動きます。

見切れを利用したアニメーション

HTMLソース

<a href="#"> <div class="clip13">四角形から円に変化する</div> </a>

CSS

.clip13 { background: orange; clip-path: circle(75%); height: 200px; transition: clip-path 1s; width: 200px; } .clip13:hover { clip-path: circle(25%); }

アニメーションサンプル2

四角形から円に変化する

上記は四角の状態からマウスを合わせると円になるアニメーションです。

四角から円に変わっているのではなく、元々円がオレンジの正方形エリアよりも大きく（75％）設定してあるだけです。

それが75％から25％の間を拡大・縮小するために四角と円と交互に切り替わっているように見えます。

マウスを端っこに置いておくときちんとアニメーションが終了しきらずにピクピクするのがわかります。

この様にクリッピングでアニメーションを使用できるクリエイティブな方法はたくさんあります。

一押し人気コーナー紹介