JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="image-wrapper">
        <svg id="image-svg">
            <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="125 0, 250 125, 0 125" />
            </clipPath>
        </defs>
    </svg>

CSS

body { background-color: #e0e0e0; }
#img-1 { clip-path: url(#clip-triangle); }
#image-svg { left: 0px; top: 0px; }