オーバーフローdivを切り取る方法

Question

青いボックスからその灰色の部分を切り取る方法を知る必要があります。

I青色ボックスから切断したい部分画像蛇腹ショーの赤い矢印。これは、コード私が持っている：

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
} 
 

 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
} 
 
\t

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

Answer 1

あなたがこのお探しですか？

.father { 
 
    height:400px; 
 
    width:400px; 
 
    margin:150px auto; 
 
    position:relative; 
 
    background:green; 
 
} 
 

 
.border { 
 
    position:relative; 
 
    bottom:50px; 
 
    margin:auto; 
 
    border-radius:50%; 
 
    width:96%; 
 
    height:30%; 
 
    background-color:#DDD; 
 
    z-index:-9; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

Answer 2

あなたがこのアプローチを見ることができます：私はあなたが外に灰色の部分を切断したい理解して何から

border-top-left-radius: 8px; 
border-top-right-radius: 8px; 

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: lightblue; 
 
    border-top-left-radius: 8px; 
 
    border-top-right-radius: 8px; 
 
} 
 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

Answer 3

青いああ。もしそうなら、あなたのやり方はここにあります。

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
    z-index: 1; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

Answer 4

.father 
 
{ 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: #04aada; 
 
    border-radius: 50px 50px 0 0; 
 
} 
 

 
.border 
 
{ 
 
    position: relative; 
 
    bottom: 25px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #fff; 
 
    z-index: 1; 
 
    box-shadow: 0px -4px 0px #04aada; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>