JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<div class="clip-test"></div>
<svg>
    <clipPath id="clip1">
        <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
      199,150 145,159 155,139 126,120 112,138 80,128 39,126
      24,104" />
    </clipPath>
</svg>

CSS

.clip-test {
    width: 200px;
    height: 200px;
    background-color: green;
    -webkit-clip-path: url("#clip1");
    -ms-clip-path: url("#clip1");  
    clip-path: url("#clip1");
    -webkit-clip-path: none;
    -ms-clip-path: none;
    clip-path: none;
}