具有相同大小块的HTML5进度条

Question

我想使用HTML5和CSS3设计下面给出的确切进度条。任何帮助，将不胜感激。提前致谢。

Progress bar with blocks

Answer 1

.bar {
  background-color: white;
  width: 100%;
  height: 20px;
}

.bar-block {
  background-color: green;
  display: inline-block;
  width: 4%;
  height: 20px;
}
.bar-block:first-child {
  border-radius: 5px 0 0 5px;
}
.bar-block:last-child {
  border-radius: 0 5px 5px 0;
}
.bar-block:nth-last-child(-n+4) {
  background-color: #ccc;
}
.bar-block:nth-last-child(-n+3) {
  background-color: #eee;
}

<div class="bar">
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
  <div class="bar-block"></div>
</div>