问题：
vue.js - 有大佬知道这种占比怎么实现不？
夏朝
三角形上面的图片也需要根据百分比，去渐变，动态变化
貌似Ui设计渐变的左右搞反了
共有2个答案
慕容越泽
根据题干补充, 上面的条形进度条需要用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都行:
<style> div { width: 200px; height: 20px; background-color: aquamarine; position: relative; } span { position: absolute; } </style><body> <div> <span>箭头</span> </div> <script> const SPAN = document.querySelector('span') // 下面二选一 // SPAN.style.left = '50%' SPAN.style.transform = `translateX(${179}px)` </script></body>小箭头直接与渐变的条纹带直接用图片就可以了
高宇定
渐变进度条可以通过 repeating-linear-gradient 配和 mask-image 实现
// html<div class="bar"></div>// cssbody { background-color: #15173d;}.bar { width: 500px; height: 20px; -webkit-mask-image: linear-gradient(to right, #000000 0%, transparent); background-image: repeating-linear-gradient( to right, rgb(255, 188, 43) 0 10px, #15173d 10px 16px );}效果如下
类似资料：
-
有没有大神知道这样的分段器效果如何实现？ 有没有大神知道这样的分段器效果如何实现？ 点击左侧按钮时右侧边框变为45度曲线，点击右侧反之，这个咋整？
-
就是鼠标点击左边的栏目，右边的缓缓的定位到栏目，这种用什么做？有相应的插件还是手写js。
-
想问下这种样式怎么实现
-
这种css效果咋实现。
-
在 www.isqqw.com 这个网站中找的，突然被删了