Các ví dụ CSS clip-path trong bố cục thực tế

Chọn mẫu lục giác, chuyển sang đầu ra dạng khai báo và sao chép quy tắc clip-path vào class ảnh vuông của bạn. Đặt chiều rộng bằng chiều cao cùng object-fit: cover; CSS ví dụ đầy đủ dùng khung minh họa 4:3 nên không thể dán nguyên vào avatar. Kiểm tra khuôn mặt gần mọi cạnh; đổi đa giác không tự di chuyển chủ thể.

Áp dụng ví dụ chevron cho một hình ảnh trang trí bên cạnh lời kêu gọi hành động. So sánh cùng tọa độ phần trăm trong một hộp vuông và một hộp rộng: chúng co giãn theo từng trục, nên góc và đường viền có thể thay đổi. Kiểm tra cả bố cục di động hẹp lẫn desktop. Giữ văn bản thiết yếu và liên kết thật nằm ngoài phần tử trang trí bị cắt.

Thử hình bình hành trên một lớp trang trí phía sau thẻ. Tránh áp dụng cho toàn bộ vùng chứa nội dung nếu điều đó cắt mất tiêu đề, viền focus hay nút. Bản xem trước hình dạng không chứng minh được khả năng truy cập bàn phím. Hãy Tab qua component hoàn chỉnh và đảm bảo điều khiển đang focus vẫn hiển thị ở cả hai chiều rộng.

Bắt đầu với mẫu lục giác, đặt điểm đầu tiên thành X 30%, Y 0%. Thêm điểm sau điểm đã chọn hoặc xóa điểm trong giới hạn 3–32 điểm. Kéo điểm, nhập tọa độ 0–100% hoặc dùng phím mũi tên (1%; giữ Shift: 10%). Chỉ sao chép khai báo clip-path để giữ bố cục hiện có; CSS đầy đủ chứa kiểu minh họa. Thử khung vuông và rộng trên máy tính lẫn điện thoại. Đặt chữ và viền tiêu điểm ngoài lớp bị cắt, đồng thời giữ phương án hình chữ nhật. Không hỗ trợ nhập CSS hoặc chỉnh circle, ellipse hay inset.

Toolars duy trì hướng dẫn này cùng công cụ được liên kết. Hãy báo cáo khi hướng dẫn khác với kết quả hiện tại để cả hai được kiểm tra cùng nhau.

Ví dụ tải xuống bên dưới là đầu vào thử nghiệm tổng hợp, không phải câu chuyện khách hàng. Khi tái hiện, giữ nguyên đầu vào và cài đặt; kiểm tra tệp tải xuống theo các tiêu chí nêu trong ví dụ, không chỉ xem bản xem trước.

Việc kiểm tra chỉ áp dụng cho ví dụ này, không chứng nhận mọi tệp, trình duyệt hay ứng dụng đích. Kiểm tra lại sau khi công cụ thay đổi và xem lại kết quả của bạn trước khi chia sẻ.

Mẫu tổng hợp của Toolars · cập nhật 2026-09-13. Các mẫu này minh họa quy trình làm việc, không thể hiện chất lượng ảnh hay bản scan thật cũng như mức chấp nhận của nền tảng.

Mẫu CSS dùng thiết lập sẵn hình lục giác. Trong CSS clip-path, chọn hình lục giác, đặt điểm ngang thành 24 và điểm dọc thành 50. So sánh hai khai báo clip-path trong bản tải xuống với mẫu; màu sắc và khoảng trắng có thể khác nhau. Thử cả phần tử rộng và hẹp: phần trăm bám theo khung phần tử. Việc cắt tự nó không khiến văn bản xung quanh ôm theo hình dạng.

Tải xuống mẫu đầu vào