有大佬知道这种占比怎么实现不?-灵析社区

脑洞大咖

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/6027213315097dcdf1f6313045284cd2.png) 三角形上面的图片也需要根据百分比,去渐变,动态变化 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/d7760c485a9ac0e9f212b9ac8562b9b5.png) 貌似Ui设计渐变的左右搞反了

阅读量:17

点赞量:0

问AI
根据题干补充, 上面的条形进度条需要用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)` 小箭头直接与渐变的条纹带直接用图片就可以了