同じサイズのブロックを含む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>