CSS ellipse() 함수

정의와 사용법

CSS의 ellipse() 함수는 두 개의 반지름 x와 y를 가진 타원을 정의합니다.

ellipse() 함수는 일반적으로 clip-path 속성과 shape-outside 속성을 함께 사용합니다.

예제

예제 1

이미지를 x 반지름이 50%, y 반지름이 30%인 타원으로 잘라냅니다：

img {
  clip-path: ellipse(50% 30%);
}

직접 테스트해 보세요

예제 2

이미지를 x 반지름이 50%, y 반지름이 30%인 타원으로 잘라내고 타원의 중심을 오른쪽에 정위치합니다：

img {
  clip-path: ellipse(50% 30% at right);
}

직접 테스트해 보세요

예제 3

사용 clip-path 와 ellipse() 동작 효과 구현:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

직접 테스트해 보세요

예제 4

결합 사용 ellipse()、clip-path 와 shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

직접 테스트해 보세요

CSS 문법

ellipse(xy-radius 위치에서)

기술 세부 사항

브라우저 지원

표에 나타난 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전입니다.

관련 페이지

참조:CSS clip-path 속성

참조:CSS shape-outside 속성

참조:CSS circle() 함수

참조:CSS 인셋() 함수

참조:CSS 폴리곤() 함수