CSS polygon() 함수

정의와 사용법

CSS polygon() 함수는 다각형을 정의하는 데 사용됩니다.

polygon() 함수와 clip-path 속성과 shape-outside 속성을 함께 사용합니다.

인스턴스

예제 1

이미지를 다각형으로 잘라냅니다:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

직접 테스트해 보세요

예제 2

이미지를 다각형으로 잘라냅니다:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

직접 테스트해 보세요

예제 3

사용 polygon()、clip-path 와 shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

직접 테스트해 보세요

CSS 문법

polygon(fill-rule, length-percentage)
값 설명
fill-rule

선택 사항입니다. 채우기 규칙을 지정할 수 있습니다. nonzero나 evenodd가 될 수 있습니다.

기본 값은 nonzero입니다.
length-percentage

필수입니다. 다각형을 정의하는 점을 지정합니다. 이는 길이나 백분율 값일 수 있습니다.

각 점은 x와 y 좌표의 쌍입니다. 0 0은 왼쪽 상단을, 100% 100%는 오른쪽 하단을 정의합니다.

기술 세부 사항

버전: CSS Shape Module Level 1

브라우저 지원

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

크롬 에지 파이어폭스 사파리 오페라
37 79 54 10.1 24

관련 페이지

참조:clip-path 속성

참조:shape-outside 속성

참조:circle() 함수

참조:ellipse() 함수

참조:inset() 함수