CSS Clip-Path Generator

Giới thiệu công cụ

Bộ tạo CSS Clip-Path tạo giá trị clip-path cho bốn loại hình dạng: circle(), ellipse(), inset() và polygon().

Tạo bố cục sáng tạo, mặt nạ hình ảnh và hình dạng phần hero mà không cần tệp SVG. Tất cả tham số cập nhật bản xem trước theo thời gian thực.

Cách sử dụng

1. Chọn loại hình dạng: circle, ellipse, inset hoặc polygon.
2. Điều chỉnh thanh trượt để cấu hình tham số hình dạng.
3. Đối với đa giác, chọn hình dạng có sẵn từ danh sách.
4. Bản xem trước trực tiếp cập nhật khi điều chỉnh.
5. Nhấp Sao chép để sao chép CSS vào clipboard.

Trường hợp sử dụng

Phần hero dùng clip-path chéo hoặc cong làm dải phân cách. Ảnh đại diện dùng circle(). Hiệu ứng hover dùng animation clip-path.

Câu hỏi thường gặp

• Clip-path có ảnh hưởng đến vùng có thể nhấp không? — Có. Vùng bị cắt không thể nhấp được.
• Có thể tạo animation cho clip-path không? — Có. Có thể chuyển đổi giữa hai hình đa giác có cùng số điểm.
• Clip-path có được hỗ trợ trên tất cả trình duyệt không? — Có, được hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại.