根据题干补充, 上面的条形进度条需要用JS写用二楼的写法就行了, 主要是根据进度修改"-webkit-mask-image: linear-gradient(to right, #000000 0%, transparent);"中"transparent"的值:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241209/034e23a6c1138ce8182da9f1520892a3.png)
修改方法与原回答类似, 动态修改"style"就可以了:
`mask-image: linear-gradient(to right, #000000 0%, transparent ${21}%)`
小箭头用绝对定位然后配合transform或者left都行:
div {
width: 200px;
height: 20px;
background-color: aquamarine;
position: relative;
}
span {
position: absolute;
}
箭头
const SPAN = document.querySelector('span')
// 下面二选一
// SPAN.style.left = '50%'
SPAN.style.transform = `translateX(${179}px)`
小箭头直接与渐变的条纹带直接用图片就可以了