border-radius로 부채꼴 도형 만들기

가끔 사이트에서 한 부분이 둥그런 도형이 필요할 때가 있다.

이럴 땐 이미지를 사용해도 되지만 border CSS로 제작이 가능하다.

 

 

HTML

<div id="radius"></div>

 

 

CSS

#radius {
  width:200px;
  height:200px;
  background-color:blue;
  -webkit-border-radius:200px 0 0 0;
  -moz-border-radius:200px 0 0 0;
}

 

 

출력

 

 

원리

border-radius는 각진 꼭지점을 둥굴게 하는 효과이다.
사각형의 도형이 있다면 0 0 0 0을 기재했을 때 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래가 된다.
따라서 첫번째 숫자의 값을 높일 수록 부채꼴에 가까운 도형이 만들어 진다.