CSS: Complexed shape divide between two div's

Question

For many hours I'm trying to find the best solution for creating a rounded horizontal separator between two sections. Below is the picture and JS Fiddle of what I'm trying to create.

The only acceptable solution that I have found so far is to use image with clip-path CSS property. But is there a simpler and more elegant solution?

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

I think the best approach to do a shape like that one is to use SVG elements to draw the curves. Here is an example of a CSS based but it's not as smooth as if it were made using 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>