CSS
7
Вклад в тег
<div class="progress">
<div class="grayback"></div>
<div class="strips"></div>
</div>
.progress {
position: relative;
width: 600px;
height: 20px;
overflow: hidden;
background: #ff3232;
background: linear-gradient(to right, #ff3232 0%,#ff9600 33%,#ffff00 66%,#00ff00 100%);
}
.strips {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
background-size: 6px 100%; /* Ширина деления = 6px / 2 = 3px */
}
.grayback {
position: relative;
left: 79%; /* Текущее состояние */
width: 100%;
height: 100%;
background-color: #ddd;
}