CSS / SVG Mask sur une image

Appliquer un masque sur un image, solution cross browser

by oilvier

HTML

<p>Tous les navigateurs <strong>sauf IE/EDGE</strong></p>

<div>
  <img src="//picsum.photos/800/600" alt="">
</div>

<p>Tous les navigateurs</p>
<div>
 
  <svg class="foo" viewBox="0 0 1500 904" preserveAspectRatio="none">
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="1500" height="904">
          <image xlink:href="//picsum.photos/1500/904" x="0" y="0" width="1500" height="904" />
         </pattern>
      </defs>
     
	  <polygon fill="url(#img1)" points="0,0 1500,100 1500,904 0,904" />
    </svg>
</div>

SCSS

div {position: relative; overflow: hidden;
  &:before {content:""; display: block; width: 100%; height: 0; padding-bottom:56.25%;}
}

img,
svg {position:absolute; top:0; left:0; width:100%; height:100%;}

//img {-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
//clip-path: polygon(0% 50%, 100% 0%, 100% 100%);}
 
.foo {display: block;}