Как создать css вогнутые/выпуклые фигуры

Question

Я хочу создать два divs с белой формой фона, изображенной ниже. Как вы видите, это в основном прямоугольник и вырезанная эллиптическая форма. Он должен иметь возможность создавать тень.

Есть ли способ достичь этого только с помощью css?

Answer 1

Я использовал 2 DIV с box-shadow я добавил border для понимания

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>