<div class="shape invert"></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;
  
  background: linear-gradient(gold,#ff8001);
}
.shape.invert {
  height: 178px;
  
  --sx: calc((100px - 100vw)/2); /* 100px width of the element | 100vw width of the container */
  --sy: -20px;
  padding: calc(-1*var(--sy)) calc(-1*var(--sx));
  clip-path: 
    polygon(var(--sx) var(--sy),calc(100% - var(--sx)) var(--sy),calc(100% - var(--sx)) calc(100% - var(--sy)),var(--sx) calc(100% - var(--sy)),var(--sx) var(--sy),var(--p)) content-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  background: repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px);
}