使用CSS Clip-path实现三个相邻Div无空白重叠布局的问题求助

我来帮你搞定这个问题！你现在遇到的空白是因为三个div用了完全相同的clip-path形状，而且只是并排摆放没有重叠空间，所以无法形成衔接的箭头效果。咱们可以通过调整每个元素的clip-path形状，再配合负外边距让它们互相重叠，就能实现你想要的无空白布局。

修改后的完整代码 #

CSS 部分：

.step-label { 
  font-weight: bold; 
  color: white; 
  font-size: 12px; 
  display: flex; 
  overflow: hidden; /* 隐藏溢出容器的部分 */
  width: fit-content; /* 让容器自适应内容宽度 */
  margin: 0 auto; /* 居中显示 */
}
.step-x { 
  flex: 0 0 33.33%; /* 固定宽度，避免flex布局自动收缩 */
  padding: 20px 0;
  text-align: center;
}
/* 第一个元素：右侧带箭头的形状 */
.s1{
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}
/* 中间元素：左右都带箭头的衔接形状 */
.s2{
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
  margin-left: -16.66%; /* 向左移动，和第一个元素重叠 */
}
/* 最后一个元素：左侧带箭头的形状 */
.s3{
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  margin-left: -16.66%; /* 向左移动，和第二个元素重叠 */
}

HTML 部分：

<div class="step-label">
 <div class="step-x s1" style="background-color:blue;"> Step 1</div>
 <div class="step-x s2" style="background-color:red;"> Step 2</div>
 <div class="step-x s3" style="background-color:orange;"> Step 3</div>
</div>

关键调整说明 #

• 定制每个元素的clip-path：
  • 第一个元素（s1）保持右侧向内斜的箭头形状，作为起始端
  • 中间元素（s2）设置左右都有斜切的多边形，这样它的左侧会留出透明区域，刚好能让第一个元素的箭头部分显示出来
  • 最后一个元素（s3）设置左侧向内斜的形状，作为结束端
• 负外边距实现重叠：给中间和最后一个元素设置margin-left: -16.66%，让它们向左移动，和前一个元素的箭头部分重叠，彻底消除空白
• 容器样式优化：设置overflow: hidden防止重叠部分溢出容器，width: fit-content让容器只占实际需要的宽度，避免不必要的拉伸

这样调整后，三个div就能完美衔接，形成你想要的无空白箭头布局啦！

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