Как сделать маску для ie edge или clip-path?

Обратите внимание на clipPathUnits="objectBoundingBox" — благодаря этому атрибуту точки обрезания задаются относительно: 1 = 100%, .1 = 10%.

<svg width=100% height=300> 
  <defs> 
    <clipPath id="clip" clipPathUnits="objectBoundingBox"> 
      <polygon points="0,0 1,.1 1,1 0,.9"></polygon> 
    </clipPath> 
  </defs> 
  <image xlink:href="http://placeimg.com/500/300/any" clip-path="url(#clip)" width=500 height=300 /> 
</svg>

Примерно так:

Demo JsFiddle

CSS

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; }

HTML

<div>
    <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>