如何通过clip-path让底部紫色div占据被裁剪的金色背景div空间

要实现.container_middle填充.container_top被clip-path裁剪掉的空间，核心是让紫色容器向上偏移并使用反向裁剪路径，精准贴合缺口区域：

具体实现代码 #

CSS 部分 #

.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;
  overflow: visible; /* 避免内部元素被裁剪隐藏 */
}

.container_middle {
  background-color: #4f027e;
  height: 45vh;
  margin-top: -13vh; /* 向上偏移，对齐金色容器的缺口 */
  /* 反向clip-path，只显示需要填充缺口的区域 */
  clip-path: polygon(55% 0%, 51% 13%, 8% 13%, 0 0, 0 100%, 100% 100%, 100% 42%, 100% 65%, 59% 13%);
}

/* 保证内部内容层级，避免被遮挡 */
.container_top .container,
.container_middle .container {
  position: relative;
  z-index: 1;
  padding: 2rem;
  color: white;
}

HTML 部分 #

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

关键逻辑说明 #

• 负margin让紫色容器向上移动，刚好覆盖金色容器被裁剪的缺口位置
• 反向clip-path是根据金色容器的裁剪路径推导的：金色容器剪掉的区域，就是紫色容器需要显示的部分，通过调整多边形坐标实现精准匹配
• 给内部容器设置相对定位和z-index，确保文字内容不会被背景层遮挡

内容的提问来源于stack exchange，提问作者mood98