테두리 반경 생성기

border-radius CSS 선언을 빠르게 생성하는 border-radius CSS 생성기 도구입니다.

Preview

Preview image

CSS 출력

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

클립 패스 컨트롤

기본 도형

셰이프 속성

0%
0%
100%
100%

Animation

0s

Presets

Rectangle

Circle

Ellipse

Triangle

Diamond

Pentagon

Hexagon

Heart

사용하는 방법

기본 컨트롤

  • 모양 선택 패널에서 기본 모양을 선택합니다
  • 범위 슬라이더를 사용하여 형상 매개 변수를 조정합니다
  • 미리보기에서 제어점을 드래그하여 클립 경로의 모양을 변경합니다.
  • Add Points 모드를 사용하여 사용자 지정 셰이프에 포인트 추가

고급 기능

  • 좋아하는 모양에 빠르게 액세스할 수 있도록 사전 설정을 저장하고 불러옵니다.
  • 사용자 지정 지속 시간, 감속/가속 및 반복을 통해 클립 경로에 애니메이션 적용
  • 생성된 CSS 코드를 복사하여 프로젝트에 붙여넣습니다.
  • 편안한 심야 디자인을 위한 다크 모드 전환

Related Tools