Javascript 如何创建弧形css内容分隔器？

我正在做一个小的网络项目，页面上有一个很好的小细节：一个弯曲的内容分隔器。通常这些只是线条，但这不是。所以我在想，如何用CSS或SVG编码，但我不确定它到底是如何工作的。在这里你可以明白我的意思： 如您所见，上面的灰色内容与橙色曲线完全一致，下面的白色内容部分沿曲线开始。有没有办法用css或svg编码，而不是使用图像

---

谢谢大家!！非常感谢您的帮助。

这是我对CSS圆角的最佳选择。。。会好起来的

.分隔器{ 宽度：100%； 高度：51vw； 位置：相对位置； 溢出：隐藏； 背景：fff； } .分割器：之后， .分割器：之前， .b:之后， .b:以前{ 内容：； 显示：块； 位置：绝对位置； } .除法器{ 宽度：63.7%； 身高：62.5%； 边界半径：50%50%0/50%； 底部：-4px； 左-7.5%； 边框：红色2px实心； 右边框：透明2px实心； } .除法器：在{ 宽度：63.6%； 身高：63.7%； 边界半径：0.50%50%/50%； 右图：-7.5%； 顶部：-4px； 背景：eee； } .分隔器b{ 显示：块； 宽度：50%； 身高：100%； 背景：eee； } .b:之后{ 宽度：63.7%； 身高：62.5%； 边界半径：0.50%50%/50%； 右图：-7.5%； 顶部：-4px； 边框：红色2px实心； 左边框：透明2px实心； } .b:在{ 宽度：63.6%； 身高：63.7%； 边界半径：50%50%0/50%； 底部：-4px； 左-7.5%； 背景：fff； }

---

这是我最好的CSS圆角。。。会好起来的

.分隔器{ 宽度：100%； 高度：51vw； 位置：相对位置； 溢出：隐藏； 背景：fff； } .分割器：之后， .分割器：之前， .b:之后， .b:以前{ 内容：； 显示：块； 位置：绝对位置； } .除法器{ 宽度：63.7%； 身高：62.5%； 边界半径：50%50%0/50%； 底部：-4px； 左-7.5%； 边框：红色2px实心； 右边框：透明2px实心； } .除法器：在{ 宽度：63.6%； 身高：63.7%； 边界半径：0.50%50%/50%； 右图：-7.5%； 顶部：-4px； 背景：eee； } .分隔器b{ 显示：块； 宽度：50%； 身高：100%； 背景：eee； } .b:之后{ 宽度：63.7%； 身高：62.5%； 边界半径：0.50%50%/50%； 右图：-7.5%； 顶部：-4px； 边框：红色2px实心； 左边框：透明2px实心； } .b:在{ 宽度：63.6%； 身高：63.7%； 边界半径：50%50%0/50%； 底部：-4px； 左-7.5%； 背景：fff； }

---

使用CSS或SVG可以很容易地做到这一点，但由于一些旧浏览器可能不支持[CSS圆角]，因此您应该有一个图像备份[或svgTry to this way@rafaelcastrocouto我知道，但问题是如何使用CSS和SVG。不确定这如何仅适用于圆角。可能重复-在Inkscape中绘制该形状，然后将其另存为SVG，使用记事本++打开SVG，从中抓取SVG并将其粘贴到html中，注意：SVG必须具有一个视图框和宽度和高度为了看起来合适，希望它能帮助您轻松地使用CSS或SVG，但您应该有一个图像备份，因为一些旧浏览器可能不支持[CSS圆角][或svgTry to this way@rafaelcastrocouto我知道，但问题是如何使用CSS和SVG。不确定这如何仅适用于圆角。可能重复-在Inkscape中绘制该形状，然后将其另存为SVG，使用记事本++打开SVG，从中抓取SVG并将其粘贴到html中，注意：SVG必须具有一个视图框和一个宽度和高度，以期待ok，希望它有帮助