Trình Tạo CSS Clip-path — Hình Dạng Sáng Tạo và Mặt Nạ

CSS clip-path cắt các phần tử thành bất kỳ hình dạng mong muốn nào. Trình tạo của chúng tôi cho phép vẽ hình dạng trực quan và tạo code clip-path trực tiếp.

Các Hình Dạng Clip-path

circle() cho hình tròn. ellipse() cho hình ellipse. polygon() cho đa giác — tam giác, hình thoi, hình ngôi sao. inset() cho hình chữ nhật có góc bo tròn. path() cho đường dẫn SVG tự do để có tính linh hoạt tối đa.

Các Section Chéo

polygon(0 0, 100% 0, 100% 85%, 0 100%) tạo section với cạnh dưới chéo. Điều này phổ biến cho các section hero trông thú vị hơn cạnh thẳng. Kết hợp với overflow: hidden cho cạnh gọn gàng.

Animate Clip-path

Hình dạng clip-path có thể animate nếu chúng có cùng số điểm. Animate từ hình chữ nhật sang hình thoi cho hiệu ứng reveal. Dùng transition: clip-path 0.3s ease cho hiệu ứng hover mượt mà trên nút và thẻ.