Question 285551 in Html Question posted in
Some basic documentation can be found here.

Html – how do I make the bottom div occupy seven noodles 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

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search