修复Angular进度条的间隙与对齐问题

问题根源 #

当前实现的问题在于：

• 每个进度条自带margin: 5px和容器的gap:10px，直接产生了间隙
• 所有进度条都添加了左右两侧的箭头伪元素，相邻进度条的箭头重复叠加，导致视觉上的错位与间隙

修复方案 #

通过调整CSS样式，移除多余间距，只保留首尾进度条的箭头，实现紧密排列的效果：

修改后的CSS代码

.progressbar {
  position: relative;
  height: 56px;
  margin: 0; /* 移除默认margin */
  background: 
    linear-gradient(to right, red 0%, yellow 50%, green 100%) /* 修正渐变百分比错误 */
      left/var(--p, 0%) 100%, /* 调整背景尺寸规则，适配进度动画 */
    lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 2s linear infinite;
}

/* 仅第一个进度条显示左侧箭头 */
.progressbar:first-child:before {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 28px solid white;
}

/* 仅最后一个进度条显示右侧箭头 */
.progressbar:last-child:after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 28px solid white;
  border-bottom: 28px solid white;
  border-left: 28px solid transparent;
}

.bar {
  display:flex;
  gap: 0; /* 移除容器间隙 */
}

/* 定义进度动画 */
@keyframes change {
  0% { --p: 0%; }
  100% { --p: 100%; }
}

修改后的HTML代码

<div class="bar">
  <div class="progressbar"></div>
  <div class="progressbar"></div>
  <div class="progressbar"></div>
</div>

关键说明 #

1. 移除多余间距：删除.progressbar的margin和.bar的gap，确保进度条紧密贴合
2. 优化伪元素显示：利用:first-child和:last-child选择器，仅在首尾进度条显示箭头，避免中间重复元素导致的间隙
3. 修正渐变与动画：调整渐变百分比使其合理，补充缺失的@keyframes实现平滑的进度动画
4. 背景适配：将背景尺寸规则从fixed改为100%，确保渐变随进度条宽度正确显示

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