Html 我可以仅使用CSS创建此形状吗？

我正在为一个具有特定形状的网页构建一个英雄部分，目前我只是使用一个图像作为实际部分背景的覆盖，但我希望减少我的请求量，并想知道是否可以使用CSS完成以下形状：

---

因此，黑色部分是实际图像的位置，而白色部分是我试图使用CSS构建的部分

这里有一个想法，用一个元素和

径向梯度来近似它


.box{
宽度：400px；
高度：200px；
显示：内联块；
溢出：隐藏；
位置：相对位置；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：50%；
底部：0；
背景：
径向梯度（右上角为100%116.3%，透明99%，#fff 100%）顶部，
径向梯度（左下100%116.3%，fff 99%，透明100%）底部；
背景大小：100%50%；
背景重复：无重复；
}
.盒子：之后{
右：0；
左：50%；
转换：scaleX（-1）；
}
身体{
背景：线性渐变（向右，紫色，蓝色）；
}

是的，这是可能的…@Temaniaf如果我不这么认为的话。我想给你一个开始，
圆角
 #rcorners1{边界半径：25px；背景：73AD21；填充：20px；宽度：200px；高度：150px；}这也可能会有所帮助-我能得到关于调查内容的建议吗？我正在搜索圆角或渐变，但我不确定什么是最好的方法，使用一堆绝对
div
来构建形状听起来不正确我个人会使用SVG作为背景image@JacqueGoupil我将尝试构建SVG来实现这一点，但这确实令人印象深刻，看看哪一个更适合你me@dgknca更改渐变的颜色（即使是透明的），您将清楚地识别技巧；）我注意到的一件事是渐变的“边界”，我认为SVG会更好一些，对吗？因为对白色部分使用100%不会产生好看的效果curve@IvanS95是的，这并不完美，但您始终可以调整不同的值以使其更好。。例如，您可以使用99.5%，而不是99%。稍后我还会添加我的SVG版本；）