Html 曲线波背景

我是html和css的新手。我想让我的圆形橙色背景曲线仅使用css，而不使用背景图像或svg。如截图所示：

无需使用背景图像曲线，只需在（.circle-inner）中使用css。但我没能做到这一点。我很累。我上传我的html和css代码

我的html和css代码：

。内圆{
宽度：310px；
高度：310px；
背景色：#d1132f；
背景重复：无重复；
保证金：0自动；
边界半径：100%；
边框：1px实心#ff8403；
显示：表格；
位置：相对位置；
z指数：1；
溢出：隐藏；
}
.圆点{
显示：表格单元格；
垂直对齐：中间对齐；
保证金：0自动；
文本对齐：居中；
颜色：#fff；
}
.圆点h2{
保证金：0；
字体大小：68px；
}
.圆点跨度{
显示：块；
字号：26px；
}
/*如果圆复位*/
.圈内：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0px；
内容：''；
z指数：-1；
背景：#ffc815；/*旧浏览器*/
背景：-moz线性梯度（左，#ffc815 0%，#ff7e01 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（左，#ffc815 0%，#ff7e01 100%）；/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，#ffc815 0%，#ff7e01 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffc815'，endColorstr='#ff7e01'，GradientType=1）；/*IE6-9*/
}
/*如果第1点*/
.圈内：之后{
/*背景颜色：橙色*/
最高：60%；
}

1点

看看下面的示例

您可以借助SVG三次贝塞尔曲线来创建复杂的形状。您需要指定三组坐标

cx1y1，x2y2，xy（或cdx1-dy1，dx2-dy2，dx-dy）

检查此链接：

试试这个

阴阳{ 显示器：flex； 对齐项目：居中； 宽度：80vmin； 高度：80vmin； 边界半径：50%； 背景：线性梯度（黑色50%，#3ed89c 0）； } #阴阳：前，#阴阳：后{ 弹性：1； 身高：50%； 边界半径：50%； 背景：黑色； 内容：“； } #阴阳：在{ 背景：3ed89c； }

---

我使用Div容器和CSS来重现所需的结果。您可以根据需要随意调整。首先，我为我们的圆圈制作了一个有边框或50%边框的div容器。接下来，我又创建了两个具有边界半径和渐变的div，并将它们旋转到合适的位置以创建结果。希望能有帮助

.circleContainer{
宽度：400px；
高度：400px；
边界半径：50%；
背景色：#ffcc33；
左缘：30%；
利润率最高：5%；
位置：绝对位置；
溢出：隐藏；
变换：旋转（17度）；
}
斯普利塔先生{
宽度：100%；
身高：40%；
浮动：左；
背景色：#cc0066；
}
curveOne先生{
宽度：100%；
位置：绝对位置；
身高：60%；
浮动：左；
变换：旋转（-50度）；
左边缘：-13%；
利润率最高：-7%；
边界左下半径：60%；
边框左上半径：0%；
背景：线性梯度（至底部，红色，#cc0066）；
}
卡维沃先生{
宽度：100%；
位置：绝对位置；
身高：60%；
浮动：左；
左缘：20%；
利润率最高：45%；
变换：旋转（-50度）；
边框右下半径：0%；
边界右上角半径：40%；
背景：线性梯度（至顶部，#cc6600，#ff9933，#ffcc33）；
}

这可能会有帮助-@Saharsh我想要这样的曲线或波浪：为什么不选择SVG呢？SVG可以很容易地嵌入到HTML中，它最终是XML，它可以为您提供所需的定制级别。如果您想在某个时候使用它，我已经尽了最大的努力。没有svg或背景图像。我不知道你为什么要对这件事一成不变。你可以尝试并发现一种新的方法。让整个开发人员社区知道您是否能够通过当前的CSS标准实现这一点。祝你好运。看起来不错，但不是我想要的。因为在我的代码中有类“.circle-inner:after”。我只想让曲线在这门课上名列前茅。因为我会用%来降低它。使用顶部。