画像をトリミングする CSS clip-path プロパティを利用 - CSS
CSS clip-path プロパティを利用して画像をトリミングするコードを紹介します。
概要
こちらの記事では、CSSのobject-fit プロパティを利用して、画像をトリミングするコードを紹介しました。
この記事では、より複雑な形状でトリミングできる、clip-path プロパティを利用した画像トリミングのコードを紹介します。
書式
polygonの場合
トリミングする形状のポリゴンの頂点を (x1,y1) (x2,y2) .... (xn,yn) とすると次の書式になります。
clip-path: polygon(x1 y1, x2 y2, .... , xn yn);
定義済みシェイプの場合
clip-path: circle(半径 at 中心x座標 中心y座標);
画像の中心に円の中心を設定する場合は
at center の記述が利用できます。
clip-path: circle(半径 at center);
clip-path: inset(上オフセット, 右オフセット, 下オフセット, 左オフセット);
clip-path: ellipse(x半径 y半径 at 中心x座標 中心y座標);
実装例1:polygonを利用したトリミング
コード
下記コードを記述します。
.my-image-01 {
width: 600px;
}
.my-image-01-clip-01 {
width: 600px;
clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
}
.my-image-01-clip-02 {
width: 600px;
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
.my-image-01-clip-03 {
width: 600px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.my-image-01-clip-04 {
width: 600px;
clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
}
.my-image-01-clip-05 {
width: 600px;
clip-path: polygon(50% 10%, 25% 55%, 40% 75%, 75% 90%, 80% 25% );
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="simple-image-clip-01.css" />
</head>
<body>
<h1>Image Clipのデモ</h1>
<p>オリジナルの画像(widthのみ指定)</p>
<image class="my-image-01" src="image.png" />
<br />
<p>トリミング1</p>
<image class="my-image-01-clip-01" src="image.png" />
<br />
<p>トリミング2</p>
<image class="my-image-01-clip-02" src="image.png" />
<br />
<p>トリミング3</p>
<image class="my-image-01-clip-03" src="image.png" />
<br />
<p>トリミング4</p>
<image class="my-image-01-clip-04" src="image.png" />
<br />
<p>トリミング5</p>
<image class="my-image-01-clip-05" src="image.png" />
<br />
</body>
</html>
解説
一番最初にオリジナルの画像を表示し、その後5つのトリミングされた画像を表示します。
最初のトリミング画像は、(0,0) (50%,0) (50% 50&) (0% 50%) の矩形でクリップします。クリップ範囲は画像の左上4分の1になります。
.my-image-01-clip-01 {
width: 600px;
clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
}
2つ目のトリミング画像は、(0,0) (50%,0) (50% 100&) (0% 100%) の矩形でクリップします。クリップ範囲は画像の左側半分になります。
.my-image-01-clip-02 {
width: 600px;
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
3つ目のトリミング画像は、(50,0) (100%,0) (100% 100&) (50% 100%) の矩形でクリップします。クリップ範囲は画像の右側半分になります。
.my-image-01-clip-03 {
width: 600px;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
4つ目のトリミング画像は、(25,25) (75%,25%) (75% 75&) (25% 75%) の矩形でクリップします。クリップ範囲は画像の中央部分になります。
.my-image-01-clip-04 {
width: 600px;
clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
}
5つ目のトリミング画像は5角形でトリミングする例です。
.my-image-01-clip-05 {
width: 600px;
clip-path: polygon(50% 10%, 25% 55%, 40% 75%, 75% 90%, 80% 25% );
}
実行結果
上記のWebページをWebブラウザで表示すると下図のページが表示されます。
トリミングされた画像が表示できています。また、トリミングされた場合でも、画像の領域は元のサイズと同じ領域が確保されるため、
クリップされた外側の余白部分は背景色で表示される動作になることも確認できます。
実装例2:定義済みシェイプでのトリミング
シンプルな形状でのマスクの場合は、定義済みシェイプの形状でクリップできます。
コード
以下のコードを記述します。
.my-image-01 {
width: 600px;
}
.my-image-01-clip-01 {
width: 600px;
clip-path: circle(80px at center);
}
.my-image-01-clip-02 {
width: 600px;
clip-path: inset(50px 200px 50px 200px);
}
.my-image-01-clip-03 {
width: 600px;
clip-path: ellipse(60px 100px at 38% 55%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="simple-image-clip-02.css" />
</head>
<body>
<h1>Image Clipのデモ</h1>
<p>オリジナルの画像(widthのみ指定)</p>
<image class="my-image-01" src="image.png" />
<br />
<p>トリミング1 (円)</p>
<image class="my-image-01-clip-01" src="image.png" />
<br />
<p>トリミング2 (矩形)</p>
<image class="my-image-01-clip-02" src="image.png" />
<br />
<p>トリミング3 (楕円)</p>
<image class="my-image-01-clip-03" src="image.png" />
<br />
</body>
</html>
解説
1つめの画像は半径80ピクセルの円形でクリップします。円の中心は画像の中心になります。
.my-image-01-clip-01 {
width: 600px;
clip-path: circle(80px at center);
}
2つめの画像は画像の上下から50ピクセル、左右から200ピクセルをクリップします。
.my-image-01-clip-02 {
width: 600px;
clip-path: inset(50px 200px 50px 200px);
}
3つ目の画像は幅60ピクセル、高さ100ピクセルの楕円形でクリップします。楕円形の中心位置は左から38%、上から55%の位置とします。
.my-image-01-clip-03 {
width: 600px;
clip-path: ellipse(60px 100px at 38% 55%);
}
実行結果
上記のWebページをWebブラウザで表示すると下図のページが表示されます。
指定した形状でのクリップができています。こちらの場合も先の場合と同様に画像の領域は元の画像と同じサイズになっており、
クリップされた外側の部分はページの背景色で描画されています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
