JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-wrapper">
    <svg id="svg" class="clip-svg">
        <rect class='svg-background' width="110px" height="110px" />
        <image id="img-1" class='svg-image' width="110px" height="110px" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg" />
    </svg>

</div>
<svg id="svg-defs">
    <defs>
        <clipPath id="clip-triangle">
            <polygon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"/>
        </clipPath>
    </defs>
</svg>

CSS

.svg-background, .svg-image {
    clip-path: url(#clip-triangle);
}
 svg.clip-svg {
    position: absolute;
    height: 110px;
    width: 110px;
}