求助：用shape-outside与clip-path实现倾斜Div内侧贴合及文本环绕

问题1：两个div内侧边缘留有空白 #

原因是flex布局下两个元素各占50%宽度，clip-path的百分比是相对于元素自身而非容器，导致斜线端点不在同一位置。解决方法是改用绝对定位让两个元素完全重叠，调整clip-path的斜线端点对齐。

问题2：右侧文本溢出无法换行 #

原因是长单词未被强制换行，添加word-break: break-all即可让文本在容器内自动换行。

修改后的完整代码：

CSS代码

.container {
  position: relative;
  width: 100%;
  height: 300px;
}

.left,
.right {
  position: absolute;
  width: 100%;
  height: 200px;
}

.left {
  background-color: #4CAF50;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.right {
  background-color: #2196F3;
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%);
  word-break: break-all;
  padding: 0 10px; /* 可选优化：避免文本贴边 */
}

HTML代码

<div class="container">
  <div class="left"></div>
  <div class="right">Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl</div>
</div>

关键调整说明 #

1. 容器改为相对定位：让子元素的绝对定位基于容器计算。
2. 子元素绝对定位+100%宽度：使两个色块完全覆盖容器，确保clip-path的百分比相对容器生效。
3. 对齐斜线端点：将right的clip-path起始点设为容器70%宽度位置，与left的斜线终点重合，消除中间空白。
4. 强制文本换行：word-break: break-all让长单词在任意字符处换行，避免溢出。

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