JSFiddle - React, Tailwind, and code Playground

by Zuhaib Siddiqui

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>

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