JSFiddle - React, Tailwind, and code Playground

HTML

<div class='fancy-triangle-image'>
    <img src='http://insolitebuzz.fr/wp-content/uploads/2014/10/test-all-the-things.jpg'/>
</div>
<svg display="none;">
  <defs>
    <clipPath id="triangle">
      <polygon points="150 0, 300 300, 0 300" />
   </clipPath>
  </defs>
</svg>

CSS

.fancy-triangle-image {
    max-width: 1200px;
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    clip-path: url(#triangle);
}
.fancy-triangle-image img{
    width: 100%;
}