CSS Battle #4

https://cssbattle.dev/play/4

CSSBattle

네번째 문제.

 

저번 답안지를 작성하면서

원을 만드는 방법은 적었다.

그러면 저렇게 윗부분만 동그란 모양을 만드려면?

역시 간단하다.

width값과 height값이 같을 때,

top(왼쪽 위), right(오른쪽 위)의 border-radius 를 전체 크기의 절반만큼 주면 된다.

bottom(오른쪽 아래), left(왼쪽 아래)j의 border-radius는 0으로 줘야한다. 

 

아 근데 위의 원은 정확하게 만하면 정반원(?)은 아니다.

정원의 절반인 반원을 만드려면 

width값을 height값의 2배로 먼저 만든다.

그 후,

top(왼쪽 위), right(오른쪽 위)의 border-radius 를 전체 넓이의 절반(즉 높이)만큼 주면 된다.

bottom(오른쪽 아래), left(왼쪽 아래)j의 border-radius는 0으로 줘야한다. 

대충 요런 느낌!

그거 외에 별다르게 새롭게 나온 내용들은 없는듯!