CSS 클립 경로 모양 생성기
현대적인 CSS 클립 경로 기하학으로 다각형, 별, 배지, 육각자 및 쉐브론 모양을 만듭니다.
브라우저에서 실행됩니다. 파일은 기기 밖으로 나가지 않습니다. 확인하는 방법 보기
…
사용 방법
- 11단계: CSS 클립 경로 모양 생성기을(를) 열고 값 입력
숫자나 텍스트를 입력하거나 파일을 추가하거나 필요한 옵션을 선택하세요. 아무것도 업로드되지 않으며 모든 것이 브라우저 안에만 남습니다.
- 22단계: CSS 클립 경로 모양 생성기이(가) 하는 일
현대적인 CSS 클립 경로 기하학으로 다각형, 별, 배지, 육각자 및 쉐브론 모양을 만듭니다.
- 33단계: 결과 확인 및 비교
결과가 바로 나타납니다. 값 하나를 바꿔 답이 어떻게 달라지는지 확인한 뒤, 상황에 맞는 수치를 사용하세요.
- 44단계: 복사 또는 저장
결과를 복사하거나 다운로드하세요. 중요한 결정을 내리기 전에는 공식 출처나 전문가에게 확인하세요.
이 도구 소개
클립 경로는 개발자가 포토샵이나 SVG 마스크를 사용하지 않고 정확한 기하학적 다각형과 모양으로 HTML 요소와 이미지를 자르도록합니다. 인기있는 사전 설정 중에서 선택하여 렌더링 마스크를 실시간으로 검사하고 생산 준비가 된 순수 CSS 다면 좌표를 복사하십시오.
최상의 결과를 위한 팁
시작하기 전에 옵션을 잠시 읽어 보고 먼저 작은 예시로 도구를 시험해 보세요. 모든 것이 기기의 브라우저에서 실행되며 입력하거나 추가한 것은 업로드되지 않고, 탭을 닫으면 모두 지워집니다. 무언가 이상해 보이면 페이지를 새로 고치고 다시 시도하거나 이 페이지의 신고 링크로 무엇이 잘못되었는지 알려 주세요. 결과가 여전히 이상하면 값을 하나씩 바꿔 어떤 항목이 가장 큰 영향을 주는지 확인하세요. 다시 사용할 거라면 이 페이지를 북마크하세요.
한눈에 보기
- 카테고리: 이미지
- 브라우저에서 실행되며 가입도 업로드도 필요 없습니다.
- 입력한 정보는 기기에 머뭅니다.
- 여러 언어로 제공됩니다.
- 콘텐츠 최종 검토일:
자주 묻는 질문
CSS 클립 경로란 무엇인가요?
The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.
어떤 모양이 미리 설정된 형태로 포함되나요?
미리 설정에는 삼각형, 육각, 5점 별, 제품 할인 배지, 내비게이션 쉐브론 및 원형 마스크가 있습니다.
이걸로 사진이나 동영상을 찍을 수 있나요?
Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.
클립 경로는 클릭 가능한 히트박스에 영향을 미치나요?
현대 브라우저에서는, 표시자 호버와 클릭 이벤트에 반응하는 요소의 눈에 보이는, 클립되지 않은 영역만 있습니다.