How To Make Clip-path Work On Microsoft Edge?

While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style

Solution 1:

Microsoft only supports the CSS clip-path property in SVG:

#foo { clip-path: url(#myClipPath) }
#content { position: relative; }
#contentspan { position: absolute; } 
#contentspan { top:50px; left: 50px; }

<divid="content"><span>Hi</span><svgwidth="400"height="400"><defs><clipPathid="myClipPath"><circlecx=100cy=100r=50 /></clipPath></defs><pathid="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)

Solution 2:

Please take a look on my solution. Hopefully, It can help you. Cheers

<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 2400 560"style="position:absolute; width: 100%;"><clipPathid="myClip"><pathd="M 0 560 L 2400 420 L 2400 0 L 0 0 Z" /></clipPath><imageclip-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>

Solution 3:

I found this article useful when faced with this issue myself.

I ended up using and ::after element with a border, something like:

header::after {
  position:absolute;
  content: " ";
  display:block;
  left:0;
  bottom:-20px;
  width:100%;
  border-style: solid;
  border-width: 0100vw20px0;
  border-color: transparent rgba(0,0,0,0.4) transparent transparent;
}

You can adjust the border-width and border-color properties to meet your needs.