html - CSS:两个div之间的复杂形状划分

Question

许多小时以来，我一直在努力寻找在两个部分之间创建圆形水平分隔符的最佳解决方案。下面是我要创建的图片和 JS Fiddle。

到目前为止，我发现的唯一可接受的解决方案是将 image 与 clip-path CSS 属性一起使用。但是否有更简单、更优雅的解决方案？

This is how divider should look like

JsFiddle:Here the Fiddle where you can experiment

.wrapper {
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border: 2px solid #ccc;
}

.section-1,
.section-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.section-1 {
  background-color: #2f4476;
  color: #fff;
}

<div class="wrapper">
  <div class="section-1">Section 1 content</div>
  <div class="section-2">Section 2 content</div>
</div>

Answer 1

我认为制作这种形状的最佳方法是使用 SVG 元素绘制曲线。这是一个基于 CSS 的示例，但它不像使用 SVG 制作的那样流畅。

.wrapper {
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border: 2px solid #ccc;
  overflow:hidden;
  
}
.section-1, .section-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  position:relative;
}

.section-1 {
  background-color: #2f4476;
  color: #fff;
}
.section-1:after{
  display:block;
  content:'';
  width:50%;
  height:20px;
  position:absolute;
  right:-16px;
  bottom:0;
  background:#fff;
  border-top-left-radius:100px;
  transform:skew(-60deg);
}

.section-1:before{
  transform:skew(-60deg);
  display:block;
  content:'';
  width:50%;
  height:20px;
  position:absolute;
  left:-18px;
  bottom:-20px;
  background:#2f4476;
  border-bottom-right-radius:100px;
  z-index:2;
}

<div class="wrapper">
  <div class="section-1">Section 1 content</div>
  <div class="section-2">Section 2 content</div>
</div>