CSSの凹凸形状の作成方法

Question

以下に示す背景の白い形の2つのdivを作成します。あなたが見ることができるように、それは基本的に矩形であり、楕円形が切り取られています。ボックスシャドウを生成できるはずです。

CSSでこれを達成する方法はありますか？

Answer 1

私は

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>