UTILS.
Riêng tư ngay từ đầu
◇

Trình tạo CSS clip-path

Cắt một phần tử thành các hình dạng phổ biến và sao chép CSS clip-path.

Tệp luôn ở trên thiết bị này

Tệp được xử lý trong trình duyệt, không bao giờ tải lên máy chủ. Trang web tải mã và tài nguyên cần thiết để chạy công cụ. Không tài khoản hay theo dõi.

Dùng Tải xuống để lưu công cụ thành một tệp HTML dùng ngoại tuyến.

Quyền riêng tư →

Thử một ví dụ cụ thể

Ví dụ

Chọn hình lục giác để nhận clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Mỗi cặp là một vị trí x và y bên trong phần tử, nên hình sẽ co giãn theo chiều rộng và chiều cao của phần tử.

Lưu ý

Cắt xén ẩn một phần phần tử nhưng vẫn giữ hộp bố cục của nó: các phần tử bên cạnh không dịch chuyển và các góc bị ẩn không còn nhận cú nhấp. Viền và bóng hộp cũng bị cắt; nếu cần bóng, hãy đặt bộ lọc drop-shadow cho phần tử bao ngoài.

Về công cụ này

Chọn một hình dạng và cắt ngay một hộp xem trước bằng quy tắc clip-path tương ứng, rồi sao chép CSS sẵn sàng dùng. Bản xem trước cập nhật trực tiếp, hoàn toàn trong trình duyệt của bạn.

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

clip-path dạng polygon hoạt động như thế nào?
Mỗi điểm là một cặp phần trăm x y so với hộp; trình duyệt nối chúng theo thứ tự và chỉ hiển thị vùng nằm bên trong đường viền.
Mọi trình duyệt có hỗ trợ clip-path không?
Các hình polygon, circle, ellipse và inset đều được hỗ trợ trong mọi trình duyệt hiện đại, nên CSS được tạo ra hoạt động mà không cần tiền tố.

Công cụ khác