CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せたい部分のみを表示するテクニックです。Webデベロッパーは、CSSのmaskプロパティとSVGのmask要素を使うことで、画像編集ソフトを使わずにブラウザー上でマスクをかけられます。 この記事では、ブラウザーのサポート問題も含め、CSSとSVGを実際に試してみましょう。 記事を執筆している時点では、ほとんどのサンプルコードはWebKit系ブラウザーでのみ動きます。ただし、SVGベースのマスクは、より
![知らなきゃ損!CSSのmaskとSVGを駆使して画像を自在に切り抜く方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c5cb7ab777e67df4f1facfdfe02f1f6ee213c4e/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2445404%2Fl%2F4274eb6e88052548.jpg)