如何实现左右分布且带间距的clip-path多边形？

要实现左右两个被空白隔开的蓝色多边形背景，你只需要调整两个伪元素的clip-path路径，并确保它们各自占据左右区域，中间留出空白即可。

修改后的完整代码： #

CSS 代码

.content {
  position: relative;
  z-index: 1;
  color: black;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
}

.content::before,
.content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #0A76E3;
}

/* 左侧多边形 */
.content::before {
  left: 0;
  width: 45%;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

/* 右侧多边形 */
.content::after {
  right: 0;
  width: 45%;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

HTML 代码

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<div class="content h-screen">
    <div class='flex flex-row justify-around items-center pt-32'>
        <div class="w-2/5">
            <div class="flex items-center justify-start gap-4 pb-4">
                <h2 class="text-6xl font-extrabold text-white">Who Are We</h2>
            </div>
            <h3 class="text-3xl space-y-4 text-white">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</h3>
        </div>
        <img class="img w-2/5" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
    </div>
</div>

关键调整说明： #

• 给两个伪元素分别设置left:0和right:0，并定义宽度（示例用45%），让它们各自占据左右两侧，中间10%的宽度自然形成空白间隔。
• 调整clip-path路径：左侧多边形右侧向内倾斜，右侧多边形左侧向内倾斜，完美匹配设计图的异形效果。
• 可根据需求修改宽度百分比和clip-path中的数值，灵活调整倾斜角度和空白区域大小。

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