前言：
最近在vue项目中需要实现一个梯形进度条的效果，矩形进度条很简单，只需要改变宽度就可以动态展示进度，主要就是如何将它的形状改为梯形。在尝试的过程中发现了一个好用的属性：clip-path。
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。它的每个参数由一对坐标组成，左边的值是x坐标，右边的值是y坐标，我们给出多个坐标，就可以按照我们规定的路径裁剪出想要的多边形，大家可以自己查查该属性的详细讲解。
欢迎大家留言更好的想法和建议~
效果展示：
动态改变蓝色DIV的宽度，效果如下：
具体代码：
HTML部分：
<div class="progress-view"> <div class="process"></div> </div>
CSS部分：
.progress-view { height: 58px; width: 210px; background-color: red; clip-path: polygon(185px 0, 100% 100%, 0 100%, 25px 0);// 将矩形裁剪成想要的尺寸的梯形 position: relative; .process { position: absolute; height: 58px; width: 0px; // 当前进度的宽度，动态设置即可 background-color: blue; } }
