3

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

showdev
  • 28,454
  • 37
  • 55
  • 73
Lik Core
  • 41
  • 1
  • 6
  • my Code https://codepen.io/km_likhon/pen/zdOOLR – Lik Core Jul 21 '17 at 11:53
  • You are more likely to get an answer if you include the important parts of your code here. Please see [mcve]. – Gary99 Jul 21 '17 at 13:56
  • Possible duplicate of [Internet Explorer and clip-path](https://stackoverflow.com/questions/21904672/internet-explorer-and-clip-path) – showdev Jul 21 '17 at 16:39

1 Answers1

0

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.

dlaub3
  • 1,107
  • 9
  • 20