Inverted Scooped corners using CSS

Answer 1

You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.

#box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
}

#box::before,
#box::after {
  content: "";
  width: 20px;
  height: 20px;
  right: 0;
  position: absolute;
}

#box::before {
  background-image: url('data:image/svg+xml;utf8,');
  bottom: -20px;
}

#box::after {
  background-image: url('data:image/svg+xml;utf8,');
  top: -20px;
}