如何创建弯曲的 CSS 内容分隔线？答案

【问题标题】：How do I create curved css content divider?如何创建弯曲的 CSS 内容分隔线？
【发布时间】：2015-03-17 21:40:40
【问题描述】：

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

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

【问题讨论】：

您可以使用 CSS 或 SVG 轻松做到这一点，但您应该回退到图像，因为某些旧浏览器可能不支持 [css 圆角][caniuse.com/#feat=border-radius] 或 svg
试试这种方式css-tricks.com/examples/ShapesOfCSS
@rafaelcastrocouto 我知道，但问题是如何使用 CSS 和 SVG 来实现。 :) 不确定这如何仅适用于圆角。
可能重复 - stackoverflow.com/questions/17202548/…
在 Inkscape 中绘制该形状，然后将其保存为 svg，使用 notepad++ 打开 svg 并从中获取 svg 并将其粘贴到 html 中，注意：svg 必须有一个视图框和一个宽度和身高，以便看起来不错，希望对您有所帮助

标签： javascript html css svg

【解决方案1】：

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

.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;
}

&lt;div class="divider"&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;

【讨论】：