Cách dùng Công cụ tạo CSS Clip-path
- Chọn một hình dạng ban đầu: polygon, hình tròn, hình elip hoặc hình chữ nhật bo góc.
- Kéo các điểm trên ảnh. Chọn một điểm rồi bấm + Add point để thêm điểm ngay sau nó, hoặc Remove point để xóa. Muốn tự vẽ hình, hãy bắt đầu từ Rectangle.
- Với hình tròn, hình elip và inset, dùng các thanh trượt trong bảng điều khiển.
- Sao chép CSS và áp dụng cho bất kỳ ảnh, video hoặc phần tử nào. Bấm Use my image để xem trước với ảnh của bạn.
clip-path nhìn nhanh
clip-path ẩn mọi thứ nằm ngoài hình dạng. Phần tử giữ nguyên kích thước và bố cục, chỉ vùng hiển thị thay đổi. Vì vậy nó rất phù hợp cho ảnh banner, avatar, hình dạng section và hiệu ứng khi di chuột (các giá trị clip-path có cùng số điểm có thể được tạo chuyển động bằng transition).
| Hàm | Ví dụ |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — một tam giác; số điểm tùy ý |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — hình chữ nhật bo góc được cắt từ các cạnh vào |
Giá trị phần trăm được tính theo khung của phần tử, nên hình dạng co giãn theo phần tử. Mọi trình duyệt hiện đại đều hỗ trợ hình dạng clip-path; dòng -webkit- dành cho Safari phiên bản cũ. Muốn làm mờ viền thay vì cắt cứng, hãy dùng CSS Mask Generator; với hình dạng hữu cơ, hãy thử SVG Blob Generator.
Cũng được tìm dưới tên: công cụ tạo clip path, css clip-path generator, clip-path polygon, hình dạng css, tạo clip path css, polygon generator css, clip-path circle, cắt ảnh hình dạng css.
Các công cụ dùng kèm tốt với Công cụ tạo CSS Clip-path
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Công cụ tạo tam giác CSS — Tạo tam giác thuần CSS cho mũi tên tooltip, dấu caret dropdown hoặc bong bóng thoại: chọn một trong 8 hướng, nhập chiều rộng, chiều cao và màu, rồi sao chép mã theo kỹ thuật border cổ điển hoặc phiên bản clip-path đơn giản hơn.
- Trình tạo CSS Filter — Điều chỉnh blur, brightness, contrast, saturation, hue, grayscale, sepia, invert và drop shadow trên ảnh mẫu hoặc ảnh của bạn, rồi sao chép CSS filter.
- Tạo sóng SVG — Thiết kế đường phân cách section dạng sóng cho landing page: thêm hoặc xóa sóng (tối đa 6, mỗi sóng có màu, độ mờ và hình dạng riêng), chỉnh số đỉnh, chiều cao và độ mượt, chọn màu và đặt sóng ở phía trên hoặc phía dưới.
Câu hỏi thường gặp
Làm thế nào để tạo hình polygon CSS?
Chọn một hình mẫu ở đây, kéo các điểm đến vị trí mong muốn và sao chép dòng clip-path: polygon(…). Mỗi điểm là một cặp x% y% tính theo phần tử.
Làm sao để thêm điểm cho polygon clip-path?
Chọn một điểm rồi bấm + Add point: một điểm mới sẽ xuất hiện ở giữa điểm đó và điểm kế tiếp, sẵn sàng để kéo. Nhấp đúp vào ảnh sẽ thêm điểm lên cạnh gần nhất; Remove point sẽ xóa điểm đang chọn.
Có thể tạo chuyển động cho clip-path không?
Có. Dùng transition hoặc animation giữa hai giá trị clip-path cùng loại và cùng số điểm, ví dụ hai polygon() có 6 điểm mỗi hình.
clip-path có hoạt động trên mọi trình duyệt không?
Các hình cơ bản (polygon, circle, ellipse, inset) hoạt động trên mọi trình duyệt hiện đại. Hãy thêm dòng -webkit-clip-path mà công cụ đã tạo sẵn để hỗ trợ các phiên bản Safari cũ.
Vì sao bóng đổ biến mất khi dùng clip-path?
clip-path cũng cắt box-shadow. Hãy bọc phần tử trong một phần tử cha và dùng filter: drop-shadow() trên phần tử cha thay thế.
Tôi có thể cài Công cụ tạo CSS Clip-path như một ứng dụng web và dùng khi không có mạng không?
Có. Công cụ tạo CSS Clip-path là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.