如何用css创建波形

我正在尝试使用

svg

重新创建此图像：

这是小提琴：

---

但是我需要这个带有css的图像。
可能吗？

您可以使用

边框左下半径

和

边框右下半径

div{
背景颜色：浅灰色；
高度：55px；
宽度：300px；
边框左下半径：100%；
边框右下半径：50%；
}
部门：之后{
内容：“；
显示：块；
背景颜色：矢车菊蓝；
高度：50px；
宽度：300px；
边界左下半径：50%；
边框右下半径：50%；
}

---

您可以使用

边框左下半径

和

边框右下半径

div{
背景颜色：浅灰色；
高度：55px；
宽度：300px；
边框左下半径：100%；
边框右下半径：50%；
}
部门：之后{
内容：“；
显示：块；
背景颜色：矢车菊蓝；
高度：50px；
宽度：300px；
边界左下半径：50%；
边框右下半径：50%；
}

---

您也可以使用

径向梯度进行此操作：


.box{
宽度：300px；
高度：100px；
背景：
径向梯度（50%-300%的圆圈，蓝色90%，透明90.5%），
径向梯度（60%-300%的圆形、90%的灰色、90.5%的透明）；
}
您也可以使用
径向梯度进行此操作：


.box{
宽度：300px；
高度：100px；
背景：
径向梯度（50%-300%的圆圈，蓝色90%，透明90.5%），
径向梯度（60%-300%的圆形、90%的灰色、90.5%的透明）；
}
到目前为止你尝试了什么？@Albzi我无法创建波形和创建直线…你可能想看看@Paulie\u D好吧，我正在尝试。@OluwasayoBabalola谢谢你到目前为止你尝试了什么？@Albzi我无法创建波形和创建直线…你可能想看看@Paulie\u D好吧，我正在尝试…@OluwasayoBabalola谢谢你这很好，但我想在盒子顶部使用一个头部，这是一个大尺寸的损坏。它似乎也有模糊效果。@Rasoul这是使用CSS而不是SVG的副作用：）这很好，但我想在一个盒子的顶部使用一个标题，它的大小很大。它似乎也有模糊效果。@Rasoul这是使用CSS而不是SVG的副作用：）