Inverted Scooped corners using CSS

Answer 1

Can you use negative space? You could have a container with the same background color as your shape, then round the corners surrounding elements to create the illusion.

.container {
  background-color: blue;
  width: 100%;
}

.negat {
  background-color: white;
  height: 100px;
}

.posit-bg {
  background-color: white;
}

.posit {
  background-color: blue;
  height: 100px;
  border-radius: 50px 0px 0px 50px;
}

.top {
  border-radius: 0px 0px 50px 0px;
}

.bot {
  border-radius: 0px 50px 0px 0px;
}