CSS의 새로운 shape() 함수 활용법 요약

• 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() 계산 함수도 사용 가능함

참고 링크

• 공식 스펙