根据题干补充, 上面的条形进度条需要用JS写用二楼的写法就行了, 主要是根据进度修改`-webkit-mask-image: linear-gradient(to right, #000000 0%, transparent);`中`transparent`的值:  修改方法与原回答类似, 动态修改`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)` 小箭头直接与渐变的条纹带直接用图片就可以了