Html 使用css制作曲线边

我正在尝试使用css而不是使用背景图像制作曲线边缘

---

白色的在灰色的上面。目前，白曲线是使用bg图像实现的。请帮助说明如何在没有背景图像的情况下实现上述设计？因此，我可以动态更改白色div的颜色。

您可以使用SVG格式使用它。首先，你可以用Figma或AdobeIllustrator或任何你喜欢的东西来制作这个形状。您可以将SVG格式的图像导入到代码中。在该格式中，有一行代码可以编辑以操纵该形状的颜色。（SVG是作为代码导入的图像）。我希望这有帮助。

.header{
    .header {
      border-top: 20px solid blue;
      height:100px;
      position: relative;
      overflow: hidden;
    }
    .header:before,
    .header:after {
      content: "";
      vertical-align:top;
      display: inline-block;
      transform-origin: top right;
      transform: skew(-40deg);
    }
    
    .header:before {
      height: 100%;
      width: 50%;
      border-radius: 0 0 20px 0;
      background: blue;
    }
    
    .header:after {
      height: 20px;
      width: 20px;
      margin-left:-1px;
      background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
    }
    
    
    /*to illustrate different values of skew*/
    .header:before,
    .header:after {
      animation:change 2s linear infinite alternate;
    }
    
    @keyframes change{
      from{transform: skew(0deg);}
      top{transform: skew(-40deg);}
    }

#Use 
<div class="header"></div>

边框顶部：20px纯蓝；
高度：100px；
位置：相对位置；
溢出：隐藏；
}
.标题：之前，
.标题：之后{
内容：“；
垂直对齐：顶部；
显示：内联块；
变换原点：右上角；
变换：倾斜（-40度）；
}
.标题：之前{
身高：100%；
宽度：50%；
边界半径：0 20px 0；
背景：蓝色；
}
.标题：之后{
高度：20px；
宽度：20px；
左边距：-1px；
背景：径向梯度（右下角圆圈，透明68%，蓝色73%）；
}
/*以说明“偏移”的不同值*/
.标题：之前，
.标题：之后{
动画：改变2s线性无限交替；
}
@关键帧改变{
来自{transform:skew（0deg）；}
顶部{变换：倾斜（-40度）；}
}
#使用

有帮助。你能包括你的代码吗。最后一个代码添加到问题。不仅仅是用形象提问。创建一个。您应该为此研究使用SVG-创建此形状的路径会很容易。我不认为您可以在不使用SVG或背景图像的情况下实现此形状的1:1。最接近的解决方案是使用

剪辑路径

属性。[clip path-CSS | MDN][1][1]：我已经使用SVG、sass和mixin完成了这项工作。谢谢大家的支持。虽然我对此表示同意，并发表了评论，但这个答案最好作为一个评论。答案应该提供一些代码或问题的解决方案（例如，如果您实际包含了SVG代码），但当答案是建议或调查方向时，最好是作为注释。