How to make clip-path work on Microsoft Edge?
Microsoft only supports the CSS clip-path property in SVG:
#foo { clip-path: url(#myClipPath) }
#content { position: relative; }
#content span { position: absolute; }
#content span { top:50px; left: 50px; }<div id="content">
<span>Hi</span>
<svg width="400" height="400">
<defs>
<clipPath id="myClipPath">
<circle cx=100 cy=100 r=50 />
</clipPath>
</defs>
<path id="foo" d="M 50,100 Q 150,50 250,100" stroke="hotpink" stroke-width="10" fill="white"></path>
</svg>
</div>Use relative/absolute positioning to layer the HTML content over the SVG as a cross-browser solution.
References
- clip-path attribute | clipPath property (Internet Explorer)
Please take a look on my solution. Hopefully, It can help you. Cheers
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 560" style="position:absolute; width: 100%;">
<clipPath id="myClip">
<path d="M 0 560 L 2400 420 L 2400 0 L 0 0 Z" />
</clipPath>
<image clip-path="url('#myClip')" width="2400px" height="750px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.myholidaycentre.com.au/wp-content/uploads/sites/25/2016/12/Beach-Banner.jpg" />
</svg>