come creare forme concave/convesse css

Question

Desidero creare due div con la forma di sfondo bianco illustrata di seguito. Come puoi vedere, è fondamentalmente un rettangolo e una forma di ellisse viene tagliata. Dovrebbe essere in grado di produrre un box-shadow.

C'è un modo per ottenere questo con solo CSS?

Answer 1

ho usato 2 div con box-shadow ho aggiunto border per comprendere

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>