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 :
One way would be to put .container_top inside .container_middle…
.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: 105vh;
}<div class="container-fluid container_middle">
<div class="container-fluid container_top">
<div class="container">
<h1>
Let’s Play and Win Together!
</h1>
</div>
</div>
<div class="container">
<h1>
Let’s Play and Win Together!
</h1>
</div>
</div>