how do I make the bottom div occupy seven noodles with clip-path

Issue

the div with the purple background I need to occupy space from the div with the golden background that was cut with clip-path

the div with the purple background I need to occupy space from the div with the golden background that was cut with clip-path

.container_top {
  background-image: radial-gradient(circle at 50% 50%, #ffc74d 0%, #f3a600 71%), radial-gradient(circle at 50% 50%, #a255ff, #5900c4 71%), radial-gradient(circle at 50% 50%, #f6090a, #7e0100 71%);
  clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 58%, 59% 87%, 55% 100%, 51% 87%, 8% 87%, 0 100%, 0 0);
  height: 60vh;
}

.container_middle {
  background-color: #4f027e;
  height: 45vh;
}

<div class="container-fluid container_top">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>
<div class="container-fluid container_middle">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>

Solution

If it's only about coloration here is a trick using border-image to extend the color of the bottom section to the top

.container_top {
  background-image: radial-gradient(circle at 50% 50%, #ffc74d 0%, #f3a600 71%);
  clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 58%, 59% 87%, 55% 100%, 51% 87%, 8% 87%, 0 100%, 0 0);
  height: 60vh;
}

.container_middle {
  border-image: linear-gradient(#4f027e 0 0) fill 0//60vh 0 0;
  height: 45vh;
}

<div class="container-fluid container_top">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>
<div class="container-fluid container_middle">
  <div class="container">
    <h1>
      Let’s Play and Win Together!
    </h1>
  </div>
</div>

Answered By - Temani Afif