SVGを使用して画像を切り取りたい場合は、CSSプロパティのclip-pathを使用することをお勧めします。 次のスクリプトはでこぼこの障壁をトリガーします。SVGはIllustratorを使用して保存でき、SVGの(相対または絶対)URLを指定でき(ChromeはこれまでネイティブでインラインSVGのみをサポートします)、ネックラインも完全に応答します。
まず、Adobe Illustratorでクリッピングマスクを作成し、次の設定でSVGをエクスポートします:
SVGと画像のアスペクト比は同じである必要があります。 最後に、外部SVGは、たとえばdata-clip属性などの画像で参照されます。:
1e4823ee95525ce0e04bb693c48e0e35
次に、次のスクリプトを統合します:
1e4823ee95525ce0e04bb693c48e0e35
結果はそれです:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.