실제 레이아웃의 CSS clip-path 예제

육각형 프리셋을 선택하고 출력 모드를 선언만으로 바꿔 clip-path 규칙을 복사한 뒤 직접 만든 정사각형 이미지 클래스에 넣으세요. 너비와 높이를 같게 설정하고 object-fit: cover를 사용합니다. 전체 예제 CSS에는 4:3 데모 상자가 들어 있으므로 아바타에 그대로 붙여 넣지 마세요. 얼굴이 가장자리에 가까운지 확인하고 다각형을 바꿔도 피사체는 자동으로 이동하지 않는다는 점을 기억하세요.

버튼 옆 장식 이미지에 화살표 모양을 적용하세요. 같은 백분율 좌표를 정사각형과 넓은 상자에 적용하면 각도가 달라질 수 있습니다. 모바일 너비도 확인하고 중요한 글자와 링크는 장식 영역 밖에 두세요.

평행사변형을 카드 뒤 장식층에 사용하세요. 내용 전체를 자르면 제목이나 포커스 테두리가 사라질 수 있습니다. 완성 화면에서 Tab으로 이동하며 두 너비에서 컨트롤이 보이는지 확인하세요.

육각형 프리셋에서 첫 점을 X 30%, Y 0%로 설정하세요. 선택한 점 뒤에 점을 추가하거나 3–32개 범위에서 삭제할 수 있습니다. 드래그, 0–100% 좌표 입력 또는 방향키(1%, Shift와 함께 10%)로 조정하세요. 기존 레이아웃을 유지하려면 clip-path 선언만 복사하세요. 전체 CSS에는 데모 스타일이 포함됩니다. 데스크톱과 모바일에서 정사각형과 넓은 컨테이너를 확인하고, 텍스트와 초점 테두리는 잘리는 레이어 밖에 두며 직사각형 대체 표시를 준비하세요. CSS 가져오기나 circle, ellipse, inset 편집은 지원하지 않습니다.

Toolars가 이 가이드와 연결된 도구를 관리합니다. 설명과 현재 출력이 다르면 함께 검토할 수 있도록 알려 주세요.

아래 다운로드 예제는 합성 테스트 입력이며 고객 사례가 아닙니다. 재현할 때 입력과 설정을 동일하게 유지하고 미리보기뿐 아니라 다운로드 파일을 안내된 확인 항목과 비교하세요.

검사는 이 예제에 한정되며 모든 파일, 브라우저 또는 대상 앱의 동작을 보증하지 않습니다. 도구가 변경되면 다시 확인하고 공유 전에 자신의 출력도 검사하세요.

Toolars 합성 샘플 · 2026-09-13 업데이트. 작업 과정의 예시이며 실제 사진·스캔 품질이나 제출처의 수락을 보장하지 않습니다.

CSS 샘플은 육각형 프리셋입니다. CSS clip-path에서 육각형을 선택하고 수평점을 24, 수직점을 50으로 설정하세요. 다운로드와 샘플의 clip-path 선언 두 개를 비교합니다. 색상과 공백은 달라도 됩니다. 넓고 좁은 요소에서 시험하세요. 백분율은 요소 상자를 따르며 자르기만으로 주변 텍스트가 감싸지지 않습니다.

입력 샘플 다운로드