大佬们菱形进度条怎么实现？

yoga

5811872

发布于
2022-10-25 浙江

更新于
2022-10-25

这种进度条怎么实现，有思路吗？还是动态的进度条，随着数据百分比会变，

前端

阅读 2.9k

3 个回答

得票最新

XboxYan

18.2k93790

发布于
2022-10-25 江苏

倾斜可以用transform: skewX(-30deg)，条形可以用渐变，进度可以用 CSS 变量来控制，如下（可以自行调整尺寸）

https://runjs.work/projects/5...

<div class="progress" style="--per: 40%"></div>

.progress{
  width: 300px;
  height: 30px;
  background: linear-gradient(to right,#fff 10px,transparent 0) 0 0/30px, linear-gradient(to right,orange,orange) 0 0/var(--per) no-repeat #eee;
  transform: skewX(-30deg)
}

木木剑光

2.2k1422

发布于
2022-10-25 四川

更新于
2022-10-25

这个效果纯 css 是可以实现的，用 repeating-linear-gradient 重复渐变 + skewX 倾斜

<head>
    <style>
        .progressBar {
            width: 300px;
            height: 20px;
            box-sizing: border-box;
            background: repeating-linear-gradient(to right, #f40 0 10px, #fff 10px 15px) 0 0/62% no-repeat, repeating-linear-gradient(to right, rgb(85, 85, 85) 0 10px, #fff 10px 15px);
            transform: skewX(-45deg);
        }
    </style>
</head>

<body>
    <div class="progressBar"></div>
</body>

效果如下