색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS 다각형 clip-path 생성기
다각형 꼭짓점을 드래그하거나 수치로 편집해 잘라낼 영역을 미리 보고 CSS를 내보냅니다.
점을 끌거나 방향키로 이동하세요. Shift를 누르면 이동 간격이 커집니다. 좌표를 직접 입력할 수도 있습니다.
CSS
도구 소개
비스듬한 패널이나 다각형 배지를 이미지 마스크 없이 설계할 수 있습니다.
사용 방법
삼각형, 마름모, 육각형 등의 프리셋에서 시작해 꼭짓점을 끌거나 X·Y 백분율을 입력하세요. 점을 추가하거나 삭제할 수도 있습니다. Tab으로 점에 초점을 맞춘 뒤 방향키로 미세 조정하고 Shift를 누르면 더 크게 이동합니다.
점은 3–32개, 좌표는 0–100%를 지원하며 목록 순서대로 연결해 닫힌 다각형을 만듭니다. 미리보기와 같은 clip-path: polygon(...)을 복사하거나 저장합니다. 곡선 경로나 잘라낸 이미지 파일은 만들지 않습니다.
자주 묻는 질문
곡선이나 상자 밖의 점도 지원하나요?
꼭짓점 3~32개의 다각형을 지원하며 각 좌표는 0%~100%입니다. 곡선과 범위 밖 꼭짓점은 지원하지 않습니다.
점을 옮긴 뒤 예상하지 못한 잘림이 생기는 이유는 무엇인가요?
점은 목록 순서대로 연결되며 마지막 점에서 첫 점으로 닫힙니다. 다른 변을 가로질러 점을 옮기면 자기 교차가 생길 수 있습니다. 프리셋에서 시작해 둘레를 따라 점 순서를 유지하고, 불필요한 점을 지우되 최소 세 개는 남기세요.
관련 도구
새 탭에서 열립니다
댓글
0