<div class="shape"></div>
<div class="shape invert"></div>
<div class="shape invert" style="--s: -30px"></div>

.shape {
  --p: 100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%,
       100% 0;
  
  width: 100px;
  aspect-ratio: 0.56;
  background: linear-gradient(gold,#ff8001);
  clip-path: polygon(var(--p));
}
.shape.invert {
  --s: -20px;
  padding: calc(-1*var(--s));
  clip-path: 
    polygon(var(--s) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) var(--s),var(--p)) content-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  gap: 100px;
  place-content: center;
  place-items: center;
  background: repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px);
}