JSFiddle - React, Tailwind, and code Playground

by Skynet_cz

HTML

<div id="image-wrapper" style="overflow: hidden; width: 100%; height: 150px;">
            <div style="width: 100%; height: 100%;">
                <svg id="image-svg" viewBox="0 0 100 100" height="100%" width="100%" preserveAspectRatio="xMinYMin slice">
                <image id="img-1" class="svg-image" width="100%" height="100%" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg"></image>

                <svg id="svg-defs" viewBox="0 0 100 100" height="100%" width="100%">
                <defs>
                <clipPath id="clip-shape">
                    <polygon points="0 0, 40 0, 50 10, 60 0, 100 0, 100 500, 0 500"></polygon>
                </clipPath>
                </defs>
                </svg>

            </div>

        </div>

CSS

body { background-color: #e0e0e0; margin: 0px; width: 100%; height: 100%; }
            #img-1 { clip-path: url(#clip-shape); }