如何创建弯曲的css内容分隔符？

Question

我正在开展一个小型网络项目，并在页面上得到了一个很好的细节：一个弯曲的内容分隔符。通常那些只是线条，但事实并非如此。所以我在思考，如何在CSS或可能的SVG中编写代码，但我不确定它是如何工作的。在这里你可以看到我的意思：   如您所见，上面的灰色内容与橙色曲线完全结束，下方的白色内容部分沿曲线开始。有没有办法用css或svg编码，而不是使用图像？

谢谢！我非常感谢任何帮助。

Answer 1

这是我最好的CSS圆角...可以变得更好

＆＃13;

＆＃13;

.divider {
  width: 100%;
  height: 51vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
  content: "";
  display: block;
  position: absolute;
}
.divider:after {  
  width: 63.7%;
  height: 62.5%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  border: red 2px solid;
  border-right: transparent 2px solid;
}
.divider:before {  
  width: 63.6%;
  height: 63.7%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  background: #eee;
}
.divider b {
  display: block;
  width: 50%;
  height: 100%;
  background: #eee;
}
.divider b:after {
  width: 63.7%;
  height: 62.5%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  border: red 2px solid;
  border-left: transparent 2px solid;
}
.divider b:before { 
  width: 63.6%;
  height: 63.7%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  background: #fff;
}

＆＃13;

<div class="divider"><b></b></div>

＆＃13;

＆＃13;

＆＃13;