初めに
cssのclip-pathを使うと画像を切り取ることが出来ますので、関連記事を参考に理解した内容を纏めてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
clip-pathとは
cssで要素にcliping領域を作って、表示したい部分（切り取りたいところ）を指定することが出来るプロパティ。
clipプロパティのupgradeバージョン。
clipとの違い
clipは適用する要素の位置がposition:absoluteまたはposition:fixedでなければなりません。また、切り抜きができる形は四角のみになります。MDNの公式ドキュメントには可能であればclip-pathを使うようにとされています。
clipの構文
clip: rect(上から離れた距離, 右へ, 下へ, 左から離れた距離);
①html
<section class="clip_section">
<div class="clip_path_main">
<img id="clip" style="width:100px;" src="image.jpg">
</div>
</section>
②css
#clip {
position: absolute;
top: 100px;
left: 200px;
height: 100px;
clip: rect(50px, 90px, 90px, 40px);
}
③結果
青い四角の領域で上から50px,左から50px離れたところを起点にして、左から右へ向けて90pxまで、上から下に向けて90pxまで表示されています。ちょっと使いづらいイメージでした。
clip-path
clipのupgradeバージョン。こちらはpositionの指定も必要なく、円形、楕円形、多角形まで様々な形をcliping出来ます。基本的によく使われるものをclip-pathを使って表示してみました。
inset
四角い形で要素を切り抜くことが出来ます。構文はmarginやpaddingの指定の仕方と同じです。
clip-path: inset(上下 左右);
clip-path: inset(上 下 左 右);
①html
<section class="clip_path_section">
<div class="clip_path_main">
<img id="clip_inset" style="width:100px;" src="image.jpg">
</div>
</section>
②css
#clip_inset {
clip-path: inset(10px 20px 5px 8px);
}
③結果
circle
円形で要素を切り抜きます。やり方は半径を指定し、円の中心点を左からx,上からyで指定します。
clip-path: circle(半径 at X座標 Y座標);
①html
<section class="clip_path_section">
<div class="clip_path_main">
<img id="clip_circle" style="width:100px;" src="image.jpg">
</div>
</section>
②css
#clip_circle {
clip-path: circle(30% at 50% 50%);
}
③結果
polygon
多角形で要素を切り抜きます。左からx座標と上からy座標を指定して多角形の角を決めます。例えば、３角形の場合それぞれのx,y座標の角を３セット用意します。
clip-path: polygon(第一X 第一Y, 第二X 第二Y, ...)
①html
<section class="clip_path_section">
<div class="clip_path_main">
<img id="clip_polygon" style="width:100px;" src="image.jpg">
</div>
</section>
②css
#clip_polygon {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
③結果
clip-pathジェネレーター
clip-pathを生成するにはcssで実際にコードを書く方法以外に、作りたい形のclipを目で確かめながらコードを生成してくれるclip-pathジェネレーターがあります。作りたい形を選んでマウスでノードを動かすだけなのでとても簡単です。
https://bennettfeely.com/clippy/
https://www.uplabs.com/posts/clip-path-generator
参考記事・サイト
https://developer.mozilla.org/ja/docs/Web/CSS/clip
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
https://www.webdesignleaves.com/pr/css/css_clip_path.html
↧