CSS shapes for reverse curved corners

Here is a simple example of how we can create reverse cornered shapes in the white color shown in the image above. Please have a look at the demo below and also check its HTML and CSS. You can also edit it in Codepen and experiment with it.

---

Demo

See the Pen Css shape: reverse curved corner by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div id="curved-corner-bottomleft"></div>
<div id="curved-corner-bottomright"></div>
<div id="curved-corner-topleft"></div>
<div id="curved-corner-topright"></div>

---

CSS

body{
  background:#000;
}

#curved-corner-bottomright:before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  right: 0;
  box-shadow: 100px 100px 0 0 #ffffff;
}
#curved-corner-topright:before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  right: 0;
  box-shadow: 100px -100px 0 0 #ffffff;
}
#curved-corner-topleft:before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  box-shadow: -100px -100px 0 0 #ffffff;
}
#curved-corner-bottomleft:before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  left: 0;
  bottom: 0;
  box-shadow: -100px 100px 0 0 #ffffff;
}