如何使用布尔玛css将进度条堆叠为一个条

Question

我正在尝试创建一个进度条，该进度条由多种颜色组成，所有这些颜色加起来就填充了一个单一的条。

我可以制作3个单独的小节，但我想使其类似于Bootstrap one

要制作3个小节，请执行以下操作：

<progress class="progress is-success" value="50" max="100"></progress>
<progress class="progress is-warning" value="35" max="100"></progress>
<progress class="progress is-danger" value="15" max="100"></progress>

最终目标是我将有一个带有绿色部分的条，黄色部分填充了下一部分，然后红色填充了其余部分。

Answer 1

使用progress元素是不可能的，您需要创建自己的进度条，看起来像这样：

.progress {
  background-color: #ccc;
  width: 100%;
  height: 10px;
}

.progress-bar { float: left; }

.progress-bar.orange {
  background-color: orange;
  height: 100%;
}

.progress-bar.blue {
  background-color: blue;
  height: 100%;
}

.progress-bar.yellow {
  background-color: yellow;
  height: 100%;
}

<div class="progress">
  <div class="progress-bar orange" style="width:10%;"></div>
  <div class="progress-bar blue" style="width:30%;"></div>
  <div class="progress-bar yellow" style="width:50%;"></div>
</div>