Internet Explorer and clip-path - html

Question

As far as I'm aware clip-path should work in IE, as demonstrated in many articles and this tutorial CSS Masking
However I can't get the below to run properly on IE, but it works fine on Chrome.
.container {
position: relative;
width: 240px;
height: 500px;
left: 50%;
top: 50%;
}
.pentagon {
-webkit-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
-o-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
-ms-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
float: left;
}
.avatar {
margin-top: 50px;
}
html {
text-align: center;
min-height: 100%;
background: linear-gradient(white, #ddd);
}
h1,
p {
color: rgba(0, 0, 0, .3);
}
<div class="container">
<div class="avatar">
<img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
</div>
</div>
<svg>
<defs>
<clipPath id="pentagon" clipPathUnits="objectBoundingBox">
<polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" />
</clipPath>
</defs>
</svg>

Answer 1

After more in depth research, when working with the image directly, IE supports clip as in rectangular shapes only but not clipPath complicated shapes.
My solution was to add the image to an SVG as below, and this time it works in both Chrome and IE9+.
Demo JsFiddle
body {
background-color: #e0e0e0;
}
#image-wrapper {
position: relative;
}
.svg-background,
.svg-image {
clip-path: url(#clip-triangle);
}
.svg-image {
-webkit-transition: all 0.5s ease 0.2s;
-moz-transition: all 0.5s ease 0.2s;
opacity: 1;
transition: all 0.5s ease 0.2s;
}
svg.clip-svg {
height: 250px;
position: absolute;
width: 250px;
}
#svg-1 {
left: 0px;
top: 0px;
}
<div id="image-wrapper">
<svg id="svg-1" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" />
</svg>
</div>
<svg id="svg-defs">
<defs>
<clipPath id="clip-triangle">
<polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/>
</clipPath>
</defs>
</svg>

Answer 2

Look at this Demo JsFiddle it supports responsive image and well documented
.member-picture {
width: 200px; /*Final image width*/
}
.member-picture image{
width:100%; /*for responsive image behaviour*/
clip-path: url('#small-clip');
}
<svg class="member-picture">
<image xlink:href="https://via.placeholder.com/350x200"></image>
</svg>
<svg viewBox="0 0 250.35696 212.65134"> <!--viewBox = "X1 Y1 X2 Y2"-->
<defs>
<clipPath id="small-clip" clipPathUnits="objectBoundingBox"
transform="scale(.0039 .0047)">
<!--Use clipPathUnits="objectBoundingBox" and transform="scale(1/(viewBox.X2-viewBox.X1) 1/(viewBox.Y2-viewBox.Y1)" -->
<path d="M231.76,2.10959c5.989,1.0033,11.34394,3.5405,14.95847,9.74636,5.229,8.97779,3.54658,20.83845,2.65967,30.67514-4.2102,46.31217-8.047,92.66163-12.03267,138.993A28.82369,28.82369,0,0,1,235.49314,189.8c-2.913,7.28451-8.96608,11.54254-17.95131,14.28814-10.36022,3.16575-21.42435,3.0895-32.14721,3.458L40.64126,212.52043c-7.4331.25543-15.17585,0.4528-21.94517-2.62817C9.79852,205.84265,4.11114,196.65751,1.7732,187.16541S-0.05058,167.74594.329,157.97752c1.53266-39.43778.62959-78.92331,0.4924-118.39062C0.7836,28.70009,1.2929,16.57391,9.01875,8.9034,20.99475-2.98675,42.47458.45166,57.6212,0.4913q29.26963,0.07661,58.5389.24813,48.42851,0.2838,96.855.82742C219.161,1.63584,225.777,1.1073,231.76,2.10959Z"
fill="#4d4d4d">
</path>
</clipPath>
</defs>
</svg>