I’m trying to create the design below where the contents of the second div is overlapping the div above.

I have tried negative margins, which push everything up but doesn’t overlap the image and content. Or I try change the position of the shape and I see the div-2 background showing through.

And when I use absolute positioning the height of div-2 does collapses, or does not shrink with the size of the new content.

html

<div id="div-1"></div>
<div id="div-2">
  <div id="container">
    <img id="image" src="" alt="" />
    <div id="content"></div>
  </div>
</div>
</div>

css

html,body {
  margin: 0;
}

* {
  box-sizing: border-box;
  border: 1px solid grey;
}

#div-1 {
  height: 18rem;
  background-color: #fad2e1;
}

#div-2 {
  position: relative;
  padding-bottom: 2rem;
  background-color: #e2ece9;
}

#div-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 96/23;
  clip-path: polygon(0% 0, 100% 99%, 100% 100%, 0 100%);
  background-color: #cddafd;
}

#div-2::after {
  content: '';
  position: absolute;
  margin-top: 23.8%;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 96/23;
  background-image: url('https://raw.githubusercontent.com/ChazUK/hosted-assets/main/layout-positioning/semi-circle.svg');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#container {
  position: relative;
  z-index: 10;
}

#image {
  display: block;
  margin-inline: auto;
  width: 15rem;
  height: 18rem;
  background-color: #eae4e9;
}

#content {
  width: 100%;
  height: 18rem;
  max-width: 44rem;
  margin-inline: auto;
  background-color: #fff1e6;
}