css içbükey/dışbükey şekiller nasıl oluşturulur

Question

Aşağıda gösterilen arka plan beyaz şekli ile iki div oluşturmak istiyorum. Gördüğünüz gibi temelde bir dikdörtgen ve bir elips şekli kesiliyor. Bir kutu gölge üretebilmelidir.

Bunu yalnızca css ile gerçekleştirmenin bir yolu var mı?

Answer 1

Ben

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>