-
CSS
shape() 함수가 Chromium과 WebKit 브라우저에서 지원되기 시작함
- 기존
path()와 달리, 더 읽기 쉬운 CSS 문법과 단위로 복잡한 도형을 정의할 수 있게 됨
-
clip-path에서 복잡한 형태를 만들 때 SVG 좌표 대신 영어 명령어 기반의 방식으로 구현 가능함
-
line, arc, curve 등의 새로운 명령어로 선, 곡선, 아크 등을 간결하게 작성 가능함
-
shape()는 아직 애니메이션 지원은 제한적이나, hover/focus에 반응하는 동적 변화는 가능함
개요
-
CSS
shape() 함수는 clip-path와 함께 사용되어, 브라우저에서 복잡한 도형 클리핑을 가능하게 하는 기능임
- 기존에는
circle, ellipse, polygon 등의 기본형이 가능했지만 자유로운 도형은 path()로만 가능했음
-
path()는 SVG 좌표와 명령어를 그대로 입력해야 하므로 가독성과 학습 곡선이 높았음
shape() 함수의 특징
-
CSS스러운 방식으로 벡터 도형을 구성할 수 있음
-
방향 키워드 (
from top left) 또는 좌표값 (from 0 0) 으로 시작점을 지정함
- 도형은 일련의 명령어로 구성됨. 예:
line, vline, arc, curve, smooth
주요 명령어 설명
-
line
- 의미: 시작점으로부터 선을 그림
- 사용법:
by 키워드로 상대 위치 지정
- 예시:
line by -2px 3px
-
vline
- 의미: 수직선을 그림
- 사용법:
to로 절대 위치, by로 상대 위치 지정
- 예시:
vline to 50px
-
hline
- 의미: 수평선을 그림
- 사용법:
to로 절대 위치, by로 상대 위치 지정
- 예시:
hline to 95%
-
arc
- 의미: 타원 형태의 곡선을 그림
- 사용법:
-
to: 아크의 끝점
-
with: 아크의 기울기 방향 (수평/수직)
-
of: 아크가 속한 타원의 반지름 (수평/수직)
- 예시:
arc to 10% 50% of 1%
-
curve
- 의미: 베지어 곡선을 그림
- 사용법:
-
to: 곡선의 끝점
-
with: 곡선의 컨트롤 포인트 (곡률 조절)
- 예시:
curve to 0% 100% with 50% 0%
-
smooth
- 의미: 부드러운 곡선(연결된 베지어 곡선)을 그림
- 사용법:
-
to: 끝점
-
by: 상대 좌표
-
with: 컨트롤 포인트
기타 사항
-
shape()는 hover/focus 상태에서 동적 변경 가능함
- 현재 브라우저에서는
transition 애니메이션은 동작하지 않음
-
calc() 계산 함수도 사용 가능함
참고 링크