'css clip path Shape is not working on ie or how can i create this with css

I want to clip an image according to a shape, like the image below.
But my code is not working in IE.
How can I get it to work in IE?

enter image description here

.svg-image {
  background: url(http://r-ce.com/wp-content/uploads/2016/01/Driving-Classes-Deal1-1.jpg);
  width: 320px;
  height: 320px;
}

.svg-image {
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0);
}
<div class="svg-image"><div>

View on CodePen

cssinternet-explorerclip-path


Solution 1:[1]

This is not supported in IE. See this link to CanIUse http://caniuse.com/#feat=css-clip-path .

Also, this thread while a few years old does provide a possible solution using SVG. clip-path svg polygon Internet explorer

One more thing, if you're into photo shop or gimp you can just cut that part of the image and make it a png with a transparent background. Then you won't have to worry about doing it in the browser. It is a pretty sweet effect though.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dlaub3

Related Questions