将内容定位在具有对角线背景形状的 div 开头上方

Question

我正在尝试创建下面的设计，其中第二个 div 的内容与上面的 div 重叠。

我尝试过负边距，它将所有内容推高但不重叠图像和内容。或者我尝试更改形状的位置，然后我看到 div-2 背景显示出来。

当我使用绝对定位时，div-2 的高度确实会折叠，或者不会随着新内容的大小而缩小。

https://codepen.io/ChazUK/pen/wvbWxrx

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;
}

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

Answer 1

解决方案是使用负边距，但我需要向 #div-2 添加顶部填充，然后将负边距添加为填充大小的两倍。

https://codepen.io/ChazUK/pen/abrmOxr

html,body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

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

#div-2 {
  padding-top: 18rem;
  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;
  transform: translateY(-100%);
}

#div-2::after {
  content: '';
  position: absolute;
  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%;
  transform: translateY(-1px);
}

#container {
  margin-top: -36rem;
  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;
}

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