div : 반원형 디스크를 만듭니다.

Question

div에서 반원형을 만들려고합니다.

다음은 내가 시도한 것입니다.

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: gray; 
 
    border-top-right-radius:100%; 
 
    border-top-left-radius:100%; 
 
}

<div> 
 
</div>

는 또한 헛된 50% 및 100%, 모든 다른 조합을 시도했다.

나는 border-radius과 그 변종의 조합이 될 수 있다고 생각하지만, 알아낼 수는 없습니다.

P. 또한이 방법으로 가능하지 않다면 어떻게 할 수 있는지 알려주세요.

Answer 1

테두리 폭은 요소 너비/높이의 백분율을 사용하여 계산되므로 브라우저 창이 완벽하게 사각형이 아니면 테두리가 원형이 아닌 타원형이됩니다.

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
div div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    border-radius: 50%; 
 
}

<div> 
 
    <div> 
 
    </div> 
 
</div>

(요청에 따라) 하나는 DIV 사용 : 여기 내 제안이다

div { 
 
    background: grey; 
 
    width: 100px; 
 
    height: 50px; 
 
    border-top-left-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
}

<div></div>

하나 개 더 솔루션 (의사 요소를 사용하여) :

(하나의 DIV를 사용하여)

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
div::before { 
 
    content: ''; 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    border-radius: 50%; 
 
}

<div></div>

또 하나의 해결책은 :

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: gray; 
 
    border-radius: 50% 50% 0 0/100% 100% 0 0; 
 
}

<div></div>