polygon() 및 circle()을 사용한 clip-path

clip-path는 요소의 표시 영역을 지정된 도형으로 잘라 냅니다. 도형 바깥의 모든 부분은 보이지 않지만 레이아웃에서는 여전히 공간을 차지합니다.

요소를 원형 도형으로 자릅니다. 인수는 반지름입니다:

x축 반지름, y축 반지름 및 선택적 중심 위치를 지정하여 타원으로 자릅니다:

가장 강력한 clip-path 함수입니다. x,y 좌표 쌍을 나열하여 다각형을 정의합니다:

선택적으로 모서리를 둥글게 만들 수 있는 직사각형으로 자릅니다. 인수는 안쪽 여백 거리입니다:

페이지 섹션 사이에 각진 섹션 전환을 만듭니다:

점의 개수가 같은 clip-path는 표시 및 모양 변형 애니메이션을 위해 전환할 수 있습니다:

단순한 둥근 도형에는 border-radius가 더 적합합니다. 배경과 테두리에도 적용되기 때문입니다. border-radius로 만들 수 없는 비직사각형 도형이 필요할 때 clip-path를 사용하세요.

path()는 임의의 도형을 표현하는 SVG 경로 문자열을 받습니다:

clip-path는 새로운 쌓임 컨텍스트를 만들며 애니메이션 중 매 프레임마다 페인트가 발생할 수 있습니다. clip-path 애니메이션은 transform이나 opacity보다 비용이 많이 드므로 함께 사용할 때 주의하세요.

clip-path의 좌표계는 요소의 테두리 상자입니다(SVG의 경우 여백 상자). 백분율은 요소의 크기를 기준으로 합니다.

clip-path는 요소를 기하학적 도형으로 자릅니다. circle()과 ellipse()는 둥근 자르기 영역을 만듭니다. polygon()은 여러 꼭짓점으로 이루어진 모든 도형을 정의합니다. inset()은 선택적으로 모서리를 둥글게 만든 직사각형으로 자릅니다. 같은 개수의 점을 가진 다각형 도형 사이를 애니메이션으로 전환하면 인상적인 표시 효과를 만들 수 있습니다. SVG 기반의 임의의 도형에는 path()를 사용하세요.