CSSのclip-pathを使ってみる

要素内のどの部分を表示するか(切り抜き)を設定できる、clip-pathプロパティを使ってみます。

対応ブラウザ

対応ブラウザはこちらで、基本的には各ブラウザ対応しています。
ただFirefox以外の場合、外部SVGファイルを使った設定はサポートしていないようです。

サンプルコード

表示領域の設定方法は6種類あります。

• inset()
• circle()
• ellipse()
• polygon()
• path()
• url()

以下のようなHTMLとCSSを用意して、各設定を使った場合の表示を試してみます。

<div class="sample-wrap">
  <div class="sample"></div>
</div>

.sample-wrap {
	border: 2px solid #000;
}
.sample {
	width: 100%;
	height: 500px;
	background: orange;
}

clip-path設定前のデモページ
オレンジ色の背景色を設定した.sampleに対して、clip-pathで表示領域の設定を行ってみます。

inset()

inset()は長方形での表示領域の設定になります。

.sample {
	clip-path: inset(10px 20px 40px 80px);
}

値が4つの場合、それぞれ上端、右端、下端、左端からの距離になります。
inset()のデモページ

marginなどと同じように引数の省略(一括指定)も可能で、値が2つの場合はそれぞれ上端と下端、右端と左端からの距離になります。

.sample {
	clip-path: inset(10px 50px);
}

inset()のデモページ2

オプションでroundキーワードを使用することができ、角丸の設定ができます。
角丸のサイズは6つ目以降の値で指定します。

.sample {
	clip-path: inset(50px round 10px 20px 40px 80px);
}

inset()のデモページ3

circle()

circle()は円形での表示領域の設定になります。

.sample {
	clip-path: circle(250px);
}

引数の1つ目は半径の値になります。
circle()のデモページ

オプションでat以降に値を指定することで、中心座標を指定できます。

.sample {
	clip-path: circle(50px at 50px 50%);
}

circle()のデモページ2

ellipse()

ellipse()は楕円形での表示領域の設定になります。

.sample {
	clip-path: ellipse(100px 250px);
}

1つ目の値がx方向の半径、2つ目の値がy方向の半径になります。
ellipse()のデモページ

オプションでat以降に値を指定することで、中心座標を指定できます。

.sample {
	clip-path: ellipse(100px 250px at 100px 50%);
}

ellipse()のデモページ2

他にもオプションとして、半径の値に「closest-side」と「farthest-side」というキーワードを使用することができます。
closest-sideの場合は楕円の中心から最も近い辺までの長さを使用、farthest-sideの場合は楕円の中心から最も遠い辺までの長さを使用するようになります。

.sample {
	clip-path: ellipse(closest-side farthest-side at 100px 200px);
}

ellipse()のデモページ3

polygon()

polygon()は多角形での表示領域の設定になります。

.sample {
	clip-path: polygon(
		300px 100px,
		400px 400px,
		150px 200px,
		450px 200px,
		200px 400px,
		300px 100px
	);
}

x座標とy座標の組み合わせを半角スペース、各座標をカンマで区切って指定します。
polygon()のデモページ

オプションとして、1つ目の値で塗りつぶしのルールを設定することができます。

.sample {
	clip-path: polygon(
		evenodd,
		300px 100px,
		400px 400px,
		150px 200px,
		450px 200px,
		200px 400px,
		300px 100px
	);
}

指定できる値はnonzeroかevenoddで、省略時は初期値のnonzeroになります。
polygon()のデモページ2

path()

path()はSVGのパス文字列を使った表示領域の設定になります。

.sample {
	clip-path: path("M300,100 L400,400 L150,200 L450,200 L200,400 Z");
}

path()のデモページ

polygon()と同じく、オプションで1つ目の値で塗りつぶしのルールを設定できます。

.sample {
	clip-path: path(evenodd, "M300,100 L400,400 L150,200 L450,200 L200,400 Z");
}

path()のデモページ2

url()

url()は別リソースを参照した表示領域の設定になります。
例として、HTML上にあるSVGタグを参照した指定を行なってみます。

<svg>
  <clipPath id="star">
    <path d="M300,100 L400,400 L150,200 L450,200 L200,400 Z" />
  </clipPath>
</svg>
<div class="sample-wrap">
  <div class="sample"></div>
</div>

clipPathに設定されたidを使って指定します。

.sample {
	clip-path: url(#star);
}

これでSVGのパスを使った表示領域の設定ができました。
url()のデモページ

HTML上のSVGタグではなく外部SVGファイルを使った設定もありますが、前述の対応ブラウザでも記載した通り、記事作成時点でFirefoxでは非対応となっています。
こちらのSVGファイルを使って設定を行ってみます。

.sample {
	clip-path: url(star.svg#star);
}

Firefoxで確認すると、表示領域の設定ができていることが確認できました。
url()のデモページ2