Công cụ tạo CSS Clip Path

Tạo Clip Path là gì?

Vẽ hình clip-path trực quan. Đa giác có thể chỉnh bằng cách kéo điểm trong phần xem trước hoặc gõ chính xác phần trăm, với các mẫu từ tam giác đến ngôi sao và bong bóng hội thoại; hình tròn, elip và inset được đặt bằng thanh trượt.

Cách sử dụng Tạo Clip Path

1. Chọn Hình dạng: Đa giác, Hình tròn, Hình elip hoặc Bên trong (inset).
2. Với đa giác, chọn một mẫu, rồi kéo các tay nắm hoặc gõ phần trăm X/Y của từng điểm; dùng Thêm điểm / Xóa điểm.
3. Với hình tròn và elip, đặt bán kính và tâm; với inset, đặt Trên, Phải, Dưới, Trái và Bán kính góc tùy chọn.
4. Bật/tắt Hiện phần bị cắt để xem phần nào bị cắt bỏ.
5. Sao chép mã CSS.

Ví dụ

Mẫu lục giác với điểm 1 dời đến X 20%

clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Khi nào nên dùng Tạo Clip Path

Dùng clip-path cho hình ảnh trang trí, mép chéo của các phần trang, avatar lục giác và hoạt ảnh hé lộ (clip-path có thể tạo hoạt ảnh giữa các hình có cùng số điểm). Nội dung bên ngoài hình bị ẩn và không nhận cú bấm. Với hình chữ nhật bo góc, hãy ưu tiên border-radius; với hình mà chữ cần chảy quanh, hãy dùng shape-outside.

Tạo Clip Path hoạt động như thế nào

Tọa độ là phần trăm của khung viền phần tử, đo từ góc trên bên trái. Đa giác được viết dạng polygon(x% y%, …) theo thứ tự điểm, hình tròn dạng circle(r% at x% y%), elip dạng ellipse(rx% ry% at x% y%) và inset dạng inset(top right bottom left round r) với bốn độ lệch được rút gọn như viết tắt của margin. Thêm điểm sẽ chèn một điểm mới ở giữa điểm đang chọn và điểm kế tiếp.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Avatar hình lục giác hoặc ngôi sao
• ✓ Mép xiên cho phần banner
• ✓ Chỉ báo bước dạng mũi tên và chữ V
• ✓ Thẻ hình bong bóng hội thoại
• ✓ Hoạt ảnh biến hình khi hover

Câu Hỏi Thường Gặp

Khám phá thêm danh mục