如何用HTML & CSS实现Div的阶梯式裁剪与元素避让？

方法1：使用shape-outside + 浮动元素 #

这种方式能让目标容器的内容自动绕开阶梯形状，彻底避免遮挡问题，是最贴合需求的方案。

代码示例 #

<div class="container">
  <div class="music">
    <h3>Music</h3>
    <ul>
      <li>歌曲1</li>
      <li>歌曲2</li>
      <li>歌曲3</li>
    </ul>
    <!-- 用于定义阶梯形状的浮动元素 -->
    <div class="stair-shape"></div>
  </div>
  <div class="my-gallery">
    <h3>My Gallery</h3>
    <p>这里是画廊的内容，会自动避开Music底部的阶梯区域，不会覆盖音乐列表内容...</p>
  </div>
</div>

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.music {
  width: 50%;
  float: left;
}

.stair-shape {
  width: 100%;
  height: 60px;
  float: right;
  /* 自定义阶梯形状，可根据需求调整坐标点 */
  shape-outside: polygon(100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0);
  /* 调试时可加背景色，实际使用设为透明即可 */
  background: rgba(0,0,0,0.1);
}

.my-gallery {
  overflow: hidden; /* 触发BFC，让内容沿形状排列 */
}

原理 #

shape-outside会告诉浏览器浮动元素的实际形状，后续的块级内容会自动沿着这个形状排版，不会覆盖Music列表——因为形状元素属于Music容器的一部分，层级和列表一致。

方法2：CSS Grid精确布局 #

通过网格划分区域，直接让My Gallery占据避开阶梯的单元格，从根源上避免重叠。

代码示例 #

<div class="grid-container">
  <div class="music">
    <h3>Music</h3>
    <ul>
      <li>歌曲1</li>
      <li>歌曲2</li>
      <li>歌曲3</li>
    </ul>
  </div>
  <div class="my-gallery">
    <h3>My Gallery</h3>
    <p>画廊内容会精准落在阶梯旁的区域...</p>
  </div>
</div>

.grid-container {
  display: grid;
  /* 定义列和行，这里按两级阶梯设计，每行高度30px */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 30px 30px;
}

.music {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  position: relative;
}

/* 用伪元素画出阶梯形状，覆盖Music底部多余区域 */
.music::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 60px;
  background: #fff; /* 与页面背景色一致，模拟裁剪效果 */
  clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0);
}

.my-gallery {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  margin-top: -30px; /* 向上偏移对齐阶梯顶部 */
}

原理 #

通过网格系统精准分配每个容器的位置，伪元素的阶梯形状负责隐藏Music底部的多余部分，确保两个容器的内容完全不重叠。

方法3：调整层级修复clip-path方案 #

如果坚持用之前的clip-path浮动方案，只需调整层级就能解决遮挡问题。

代码示例 #

.music {
  position: relative;
  z-index: 1; /* 让Music容器及列表处于上层 */
}

.my-gallery {
  float: right;
  width: 50%;
  /* 自定义裁剪形状，匹配阶梯 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%, 50% 100%);
  z-index: -1; /* 让My Gallery处于下层 */
}

注意 #

此方法要求My Gallery的背景为透明或与页面背景一致，否则会透出下层内容。

内容的提问来源于stack exchange，提问作者John Albert Flores