如何用右侧Div填充左侧Div的clipPath裁剪区域？

我明白你想要的效果：左侧Div用clip-path裁剪后，右侧Div刚好填充被裁剪出来的空白区域，形成连贯的视觉效果对吧？之前用负百分比没效果，是因为clip-path的百分比是相对于元素自身尺寸的，负值会让裁剪区域超出元素边界，而元素背景只会在自身范围内渲染，所以看不到预期效果。

这里给你两个实用的解决方案：

方案一：对称裁剪路径对齐 #

如果你的裁剪形状是规则的（比如斜角、多边形），可以给左右Div设置对称的clip-path，让右侧的裁剪区域刚好匹配左侧被剪掉的部分。举个具体的例子：

<template>
  <div class="wrapper">
    <div class="container__left">
      <h2>左侧内容区域</h2>
      <p>这里是被clipPath裁剪后的内容</p>
    </div>
    <div class="container__right"></div>
  </div>
</template>

.wrapper {
  display: flex;
  width: 900px;
  margin: 2rem auto;
}

.container__left {
  flex: 1;
  background: #e8f4f8;
  padding: 2.5rem;
  /* 左侧裁剪：右侧底部切一个斜角 */
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.container__right {
  flex: 1;
  background: #3498db;
  /* 右侧对称裁剪：左侧底部切对应斜角，刚好填补左侧空白 */
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

这个方案的核心是让左右两个clip-path的裁剪边缘完全对齐，只要调整百分比数值就能匹配不同的裁剪角度。

方案二：使用CSS Mask实现反向填充 #

如果你的裁剪形状比较复杂（比如曲线、不规则图形），可以用CSS mask属性，给右侧Div应用和左侧反向的遮罩，这样就能精准填充左侧的裁剪空白：

.container__left {
  flex: 1;
  background: #e8f4f8;
  padding: 2.5rem;
  /* 定义左侧的裁剪路径 */
  mask: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  -webkit-mask: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.container__right {
  flex: 1;
  background: #3498db;
  /* 右侧使用反向的遮罩，刚好显示左侧被裁剪的部分 */
  mask: polygon(92% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask: polygon(92% 0, 100% 0, 100% 100%, 0 100%);
}

注意事项 #

• 确保左右Div的宽度一致（比如用flex:1均分，或者固定相同宽度），这样百分比裁剪的位置才能精准对齐。
• 如果是更复杂的path()路径，可以复制左侧的路径代码，调整x轴坐标实现反向匹配。

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