JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="one"></div>

<!-- This second path was made with this tool: https://bennettfeely.com/clippy/ -->
<div id="two"></div>

CSS

div#one {
  background: #232323;
  width: 100%;
  height: 300px;
  -webkit-clip-path: polygon(62% 1%, 79% 4%, 100% 0, 100% 100%, 65% 90%, 39% 99%, 21% 96%, 0 100%, 0 0, 40% 7%);
  clip-path: polygon(62% 1%, 79% 4%, 100% 0, 100% 100%, 65% 90%, 39% 99%, 21% 96%, 0 100%, 0 0, 40% 7%);
}

div#two {
  background: #c842f4;
  width: 100%;
  height: 300px;
  -webkit-clip-path: polygon(0% 31%, 14% 22%, 29% 29%, 74% 17%, 100% 28%, 100% 80%, 83% 95%, 66% 71%, 61% 98%, 58% 81%, 25% 94%, 0% 82%);
clip-path: polygon(0% 31%, 14% 22%, 29% 29%, 74% 17%, 100% 28%, 100% 80%, 83% 95%, 66% 71%, 61% 98%, 58% 81%, 25% 94%, 0% 82%);
}