Trình tạo hiệu ứng clip-path cho CSS.

CSS Clip-Path Generator là một công cụ trực quan để tạo và kiểm tra các thuộc tính CSS clip-path. Clip-path cho phép bạn cắt các phần tử thành các hình cơ bản (hình tròn, hình elip, đa giác) hoặc một đường dẫn SVG. Công cụ này cung cấp bản xem trước thời gian thực và tạo mã để giúp bạn thiết kế các hình dạng tùy chỉnh cho các dự án web của mình.

Nhấp vào bất kỳ nút hình dạng có sẵn nào trong bảng Presets để áp dụng ngay lập tức. Công cụ bao gồm 12 hình dạng tích hợp sẵn: Hình tam giác, Hình thang, Hình bình hành, Hình ngũ giác, Hình lục giác, Hình thất giác, Hình bát giác, Ngôi sao, Hình tròn, Hình elip, Khung trong và Hình chữ nhật trong bo tròn. Bản xem trước được cập nhật ngay lập tức để hiển thị cách hình dạng cắt phần tử.

Nhập bất kỳ giá trị clip-path hợp lệ nào vào trường nhập Custom Path. Hỗ trợ tất cả các chức năng clip-path: polygon(), circle(), ellipse(), inset() và path(). Công cụ hiển thị mã CSS được tạo với cả tiền tố tiêu chuẩn và -webkit- để đảm bảo độ tương thích tối đa với trình duyệt. Nhấp vào nút Copy để sao chép mã vào clipboard của bạn.

Trình tạo Đa giác cung cấp giao diện trực quan để tạo các hình dạng đa giác tùy chỉnh. Mỗi điểm được xác định bởi tọa độ X và Y (0-100%). Thêm nhiều điểm hơn (tối thiểu 3) để tạo các đa giác phức tạp hoặc xóa điểm để đơn giản hóa. Trình tạo tự động tạo cú pháp CSS polygon() hợp lệ khi bạn điều chỉnh tọa độ.

Tùy chỉnh bản xem trước bằng cách điều chỉnh thanh trượt Size (100-400px) và sử dụng bộ chọn màu để thay đổi màu nền của phần tử. Các điều chỉnh này giúp bạn hình dung cách clip-path sẽ xuất hiện với các kích thước và màu sắc phần tử khác nhau trong thiết kế của mình.

CSS clip-path được hỗ trợ trong tất cả các trình duyệt hiện đại. Công cụ tự động bao gồm -webkit-clip-path để tương thích với Safari. Lưu ý rằng clip-path với hàm path() có hỗ trợ hạn chế trong các trình duyệt cũ hơn. Luôn kiểm tra các trình duyệt mục tiêu của bạn trước khi triển khai sản xuất.