CSS部分:
.div{
height: 100px;
width: 300px;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-color: green;
background-size: 40px 40px;
}
HTML部分:
<div class="div"></div>
效果:
注意点:进度条采用线性渐变操作。background-image:linear-gradient。要使得没有颜色之间没有过渡的效果,就在同一状态设置两个颜色。比如在25%处, rgba(255, 255, 255, .15) 25%, transparent 25%。