오버 플로우 div를 자르는 방법

Question

파란색 상자에서 회색 부분을 자르는 방법을 알아야합니다.

나는 파란색 상자에서 절단하고 싶은 부분 이미지를 넣고 쇼에 빨간색 화살표. 이 코드 나는이된다

.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

이 찾고 계십니까? 난 당신이 외부 회색 부분을 잘라 싶습니다 이해하는 것과

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 2

당신은이 방법을 볼 수 파란색 그렇군. 그렇다면, 당신이 그것을하는 방법입니다.

.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 3

:

.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 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>