jak utworzyć wklęsłe/wypukłe kształty css

Question

Chcę utworzyć dwa elementy div z białym tłem przedstawionym poniżej. Jak widać, w zasadzie wycina się prostokąt i kształt elipsy. Powinien być w stanie wytworzyć cień skrzynkowy.

Czy można to osiągnąć tylko za pomocą css?

Answer 1

Użyłem 2 div z box-shadow dodałem border dla zrozumienia

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>