使用CSS clip-path实现div重叠时如何避免子元素被遮罩且无需绝对定位实现梯形背景

当前的裁切异常来自DOM结构设计：将.bg2嵌套在.bg1内部时，.bg1自身设置的clip-path会对**整个元素盒模型内的所有内容（包括子元素）**统一应用可视范围裁切，只要内部子元素的位置超出clip-path定义的多边形边界，超出部分就会被强制隐藏。这并非clip-path对全局下层元素生效的遮罩逻辑，是父级元素自身裁切规则带来的连锁效果。

不使用绝对定位即可实现叠放梯形效果，核心是把父子嵌套的DOM结构改成同层级并列结构，通过负外边距实现两个块的重叠，从根源上避免父级裁切子元素的问题：

调整后的HTML结构 #

<!-- 两层背景独立并列，取消嵌套关系 -->
<div class="bg1"></div>
<div class="bg2">
  <h1>Hello World</h1>
</div>

配套CSS代码 #

.bg1 {
  background-color: #ff0000;
  /* 预留和下层重叠的内边距空间 */
  padding: 100px 0 150px;
  clip-path: polygon(0 18%, 100% 0, 100% 90%, 0 100%);
}

.bg2 {
  background-color: #3f3f3f;
  /* 负外边距向上重叠，替代绝对定位实现叠放 */
  margin-top: -100px;
  padding: 100px 0;
  clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
}

• 修改margin-top的负数值，可调整两个梯形的重叠长度，匹配示例图比例
• clip-path的多边形坐标基于元素自身宽高计算，响应式适配时倾斜角度不会变形
• 正文内容放在上层.bg2内部时，因.bg2的裁切范围完整覆盖内容区，不会出现文字被裁切的问题

注意：设置了clip-path的父元素内，不要嵌套需要跨裁切边界显示的内容，所有需要异形裁切的背景层，优先使用同层级并列+负边距的方式实现。

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