Angular进度条：如何让最后一个步骤项右侧边框与第一个左侧一致？

你的进度条通过clip-path实现了箭头衔接的步骤样式，要让最后一个.bar-step的右侧边缘和第一个的左侧保持平直一致，只需添加针对最后一步的CSS规则并微调容器样式即可，具体修改如下：

修改后的完整CSS代码 #

.bar {
  --d: 1rem;
  /* arrow depth */
  --gap: 0.3rem;
  /* arrow thickness, gap */
  display: flex;
  /* 移除原有的右侧外边距，最后一步不再需要预留箭头空间 */
}

.bar-step {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.6rem var(--d);
  margin-right: calc(var(--d) * -1 + var(--gap));
  background: #d9e3f7;
  color: #23468c;
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}

.bar-step:first-child {
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}

/* 新增最后一步的专属样式 */
.bar-step:last-child {
  /* 重定义clip-path，去掉右侧箭头，让边缘平直 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, var(--d) 50%);
  /* 移除负外边距，避免和容器产生不必要的重叠 */
  margin-right: 0;
}

.bar-step.active {
  background: #23468c;
  color: #fff;
}

关键修改说明 #

1. 容器样式调整：删除.bar的margin-right: var(--d)，因为最后一步不再需要为箭头预留右侧空间。
2. 最后一步样式定义：
   • 通过clip-path去掉右侧的箭头形状，让右侧边缘和第一步的左侧一样保持平直。
   • 把margin-right设为0，因为最后一步后面没有其他步骤，不需要负外边距来实现箭头重叠效果。

无需修改的HTML代码 #

<div class="bar">
  <div class="bar-step active">Step 1</div>
  <div class="bar-step">Step 2 text</div>
  <div class="bar-step">Step 3</div>
  <div class="bar-step">Step 4</div>
</div>

修改完成后，进度条的首尾两端样式会完全一致，整体视觉更协调。

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