Angular进度条箭头形状调整：如何实现目标箭头样式？

我正在开发Angular应用并制作进度条，现有代码实现的效果已接近预期，但箭头形状不符合要求，需要调整为目标样式（箭头为向外的梯形衔接样式）。

现有代码 #

CSS代码 #

.progressbar {
      height: 56px;
      background: lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
      animation: change 1s linear infinite;
      margin: 5px -10px;
      clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
    }
    .progressbar:first-child {
      margin-left: 0;
      clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    }
    .progressbar:last-child {
      margin-right:0;
    }
    .bar {
      display:flex;
      gap:20px; /*You can use now this property to play with the separation between the bars*/
    }
    .progressbar.active{
      background: 
    linear-gradient(to right, red 0%, yellow 50%, green 34%)
      left/var(--p, 100%) fixed,
    lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
    }

HTML代码 #

<div class="bar">
    <div class="progressbar active" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
</div>

修改方案 #

目标样式的箭头是右侧向外突出的梯形，左侧与前一个进度条的箭头凹槽完全衔接，需要调整clip-path的坐标，并修正margin和gap的配合：

• 调整通用.progressbar的clip-path和margin，让左侧是向内的凹槽，右侧是向外的箭头：

.progressbar {
  height: 56px;
  background: lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  margin: 5px -12px; /* 调整margin匹配箭头宽度 */
  clip-path: polygon(
    12px 0%, 
    calc(100% - 12px) 0%, 
    100% 50%, 
    calc(100% - 12px) 100%, 
    12px 100%, 
    0% 50%
  );
}

• 修改第一个进度条的clip-path，去掉左侧凹槽，保持左侧平直：

.progressbar:first-child {
  margin-left: 0;
  clip-path: polygon(
    0% 0%, 
    calc(100% - 12px) 0%, 
    100% 50%, 
    calc(100% - 12px) 100%, 
    0% 100%
  );
}

• 修改最后一个进度条的clip-path，去掉右侧箭头，保持右侧平直：

.progressbar:last-child {
  margin-right: 0;
  clip-path: polygon(
    12px 0%, 
    100% 0%, 
    100% 100%, 
    12px 100%, 
    0% 50%
  );
}

• 调整.bar的gap为0，因为margin已经处理了衔接：

.bar {
  display:flex;
  gap: 0; /* 取消gap，用margin实现箭头衔接 */
}

修改后完整CSS代码 #

.progressbar {
  height: 56px;
  background: lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  margin: 5px -12px;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%);
}
.progressbar:first-child {
  margin-left: 0;
  clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%);
}
.progressbar:last-child {
  margin-right: 0;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
}
.bar {
  display:flex;
  gap: 0;
}
.progressbar.active{
  background: 
linear-gradient(to right, red 0%, yellow 50%, green 34%)
  left/var(--p, 100%) fixed,
lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
}

说明 #

• 12px是箭头的宽度，可根据需求调整数值，越大箭头越宽
• 取消.bar的gap，让margin的负数值实现进度条箭头的无缝衔接
• 每个进度条的clip-path坐标精准对应，确保左侧凹槽和右侧箭头完全匹配

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