任意の形に要素を切り抜く（マスクする）方法（CSS-Only）

更新日：2023.3.20

See the Pen Untitled by Wentertainment (@wenterme) on CodePen.

• 任意の形に要素を切り抜く（マスクする）方法。
• 切り抜きたい形の画像（上記の例ではSVGを使用）を用意して、切り抜きたい要素に「mask-image: url(XX.xxx);」を指定すればOK!
• 「mask-size」や「mask-repeat」、「mask-position」などのプロパティで、大きさや位置などを調節できる。（backgroundプロパティと同様の使い方）
• 流体シェイプでマスクすると有機的な印象になるのが好き🙆‍♂️
• （余談）CodePenのCSS内に、複数の画像urlを指定するとCORSエラーが発生して、Resultが表示されなかった。後々のために解決しておきたい。。。
• →ChatGPT先生に上記CORSエラーについて教えていただきました😀
  
  「CORS（Cross-Origin Resource Sharing）エラーは、異なるオリジン（ドメイン・ポート・プロトコルの組み合わせ）間でリソースを共有する際のセキュリティ上の制限によって発生する場合があります。
  
  Codepenは、画像などのリソースをCodepenのドメインから取得しているのではなく、外部のサイトから取得しているため、ブラウザーはセキュリティ上の理由からリソースを読み込めません。
  
  この問題を解決するためには、以下のいずれかの方法があります。
  
  1.Codepenのドメインに画像をアップロードする。
  2.CORSを許可する外部サイトから画像を取得する。
  3.画像をBase64形式のデータURIに変換して、CodepenのHTML内に直接埋め込む。
  
  ただし、セキュリティ上の理由から、2の方法は制限される場合があります。また、3の方法は画像が大きい場合にはパフォーマンスの問題が生じることがあります。」
  
  「mask-imageは、SVGや画像などの要素をマスクするために使用されます。したがって、mask-imageで指定された画像がCodepenのドメイン外の場合、CORSエラーが発生する可能性があります。これは、ブラウザーの同一オリジンポリシー（Same-Origin Policy）によって、Codepenのドメイン外からの画像の読み込みが制限されているためです。
  
  一方、mask-imageを使用しない場合は、要素自体にスタイルを適用することができるため、CORSエラーが発生する可能性が低くなります。しかし、要素をマスクするためにmask-imageを使用する場合には、別の方法を使用する必要があります。」