How to create concave / convex css shapes

Question

I want to create two divs with the background white shape shown below. As you can see, it is basically a rectangle and an elliptical cut out shape. He should be able to create a shadow for the boxes.

Is there any way to achieve this with css only?

Answer 1

I used 2 divs with box-shadow , I added border for understanding

 body { background:url(https://placeimg.com/640/480/any); } .out { width: 455px; height: 275px; border: 1px solid red; position: relative; overflow: hidden; margin: 20px; } .in { width: 550px; height: 550px; border: 1px solid green; position: absolute; left: 200px; border-radius: 50%; box-shadow: 0 0 0 500px white; /* this is the white background */ } .bottom .in { bottom: 0; left: 200px; } 

 <div class="out"> <div class="in"> </div> </div> <div class="out bottom"> <div class="in"> </div> </div>