CSS | 画像を図形の形で切り抜く方法

CSS 画像,CSS

CSS | 画像を図形の形で切り抜く方法

CSSで画像を好きな図形の形で切り抜く方法とサンプルコードを紹介しています。

CSSで画像を図形の形で切り抜く

CSSの「clip-path」プロパティを使う事で、簡単に画像を色々な図形の形に切り抜いて表示する事が可能です。

以下は、画像をひし形に切り抜いた表示例になります。

<img class="rhombus" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">

画像を指定した図形の形で切り取って表示するには「clip-path」プロパティで「polygon()」「path()」を指定します。

「polygon()」は、「%」「px」で指定した直線の連続で表現した図形を表しています。

「clip-path」プロパティは、画像タグに直接指定してもOKです。

.rhombus {
	width: 200px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

「CSSで画像を図形の形で切り抜く方法」をCodePenで確認する

CSS 画像,CSS

Posted by Yousuke.U