CSS 斜条纹进度条

效果：

代码：

html:

<div class="active-line flex"><!-- lineWidth：灰色背景 --><div class="bg-line"><div v-for="n in 30" class="gray"></div></div><div class="flex line-w"><!-- lineWidth：当前进度长度 --><div class="line" :style="`width: ${lineWidth}px`"></div><div class="round-dot" :style="lineWidth&&'width: 24upx'"></div></div>
</div>

 css：

.active-line {width: 420upx;height: 12upx;// background: #EEEEEE;border-radius: 10upx;margin: 42upx 0 0 40upx;position: relative;.line-w {position: absolute;left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);.line {border-radius: 10upx 0 0 10upx;height: 12upx;background: linear-gradient(30deg, #565F6F 0%, #212538 100%);}.round-dot {height: 24upx;border-radius: 50%;background: #212538;}}
}
.flex {display: flex;align-items: center;
}
.bg-line {padding: 0 6upx;display: flex;overflow: hidden;white-space: nowrap;border-radius: 6upx;.gray {display: inline-block;flex-shrink: 0;height: 12upx;width: 12upx;background-color: #eee;transform: skewX(-45deg);margin: 0 2upx;}
}

原理：斜条纹由多个带有倾斜角度的元素组成，直接用一个元素画不出来。