Насколько мне известно, clip-path должен работать в IE, как показано во многих статьях и этом руководстве Маскировка CSS
Однако я не могу заставить нижеприведенное правильно работать в IE, но оно отлично работает в 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>