Angular进度条实现：将每个进度区块拆分为双背景子段

你可以通过调整现有CSS中伪元素的背景色来实现需求，以下是修改后的完整代码：

修改后的CSS代码 #

.wrap {
  width: 100%;
  height: 30px;
  z-index: -2;
  white-space: nowrap;
  overflow: hidden;
}

.wrap div:first-child {
  margin-left: -2%;
}

.progress {
  margin: 0;
  margin-left: 0.5%;
  height: 30px;
  width: 25%;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  transition: all 0.8s;
  color: #fff; /* 可选：让文字在有色背景下更清晰 */
}

.progress:before,
.progress:after {
  content: "";
  position: absolute;
  transition: all 0.8s;
  z-index: -1;
}

.progress:before {
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: #4a90e2; /* 上段自定义颜色 */
  transform: skew(45deg);
}

.progress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: #50e3c2; /* 下段自定义颜色 */
  transform: skew(-45deg);
}

.progress:hover:before {
  background: #ff6b6b; /* 鼠标悬停时上段颜色 */
}

.progress:hover:after {
  background: #ffd93d; /* 鼠标悬停时下段颜色 */
}

对应HTML代码（无需修改） #

<div class="wrap">
  <div class="progress">
    simple
  </div>
  <div class="progress">
    as
  </div>
  <div class="progress">
    complex
  </div>
  <div class="progress">
    Web Development
  </div>
</div>

关键修改说明 #

• 分别给:before（上段）和:after（下段）设置不同的初始背景色，替换了原来统一的灰色
• 给.progress添加文字颜色，避免浅色背景下文字辨识度低（可选配置）
• 鼠标悬停状态下也分别设置两段的高亮颜色，保持交互效果的一致性

如果需要给每个进度区块设置独特的双色组合，可以给每个.progress添加自定义类：

<div class="progress progress-1">simple</div>
<div class="progress progress-2">as</div>

然后在CSS中针对类单独设置颜色：

.progress-1:before { background: #4a90e2; }
.progress-1:after { background: #50e3c2; }
.progress-2:before { background: #9b59b6; }
.progress-2:after { background: #3498db; }

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