CSS梯形进度条-矩形裁剪法

前言：

最近在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;
    }
  }