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%);
}