CSS 斜切进度条样式

使用 linear-gradient 函数可以实现如图斜切进度条样式，linear-gradient 函数有多种传参，具体查看 MDN。

本例中第一个参数为渐变角度，第二个参数为透明部分的颜色和长度，第三个参数为显示部分的颜色和长度，可自行改变参数调整出合适效果。

效果图：

HTML 代码：

<div class="progress">
    <div class="progress-l" style="width: 70%"></div>
    <div class="progress-r" style="width: 30%"></div>
</div>

CSS 代码：

.progress {
    display: flex;
    width: 100%;
    height: 10px;
}
.progress-l {
    background: linear-gradient(-60deg, transparent 5px, #F7CC38 0);
    border-radius: 5px 0 0 5px;
}
.progress-r {
    background: linear-gradient(120deg, transparent 5px, #66D4AD 0);
    border-radius: 0 5px 5px 0;
}