Tạo clip-path

Cách hoạt động

clip-path cắt một phần tử theo một đường viền. Mọi thứ bên ngoài hình dạng không được vẽ và không nhấp được, nên đó là một hình dạng thật chứ không phải hình ảnh của nó, và nó dùng được trên mọi phần tử, kể cả ảnh và video.

Phần trăm, không phải pixel

Các điểm của đa giác được cho dưới dạng phần trăm chiều rộng và chiều cao của chính phần tử, nên hình dạng giãn theo phần tử thay vì vỡ ở kích thước khác. Đó là điều giúp nó dùng được trong bố cục đáp ứng.

Nhấp chuột theo hình dạng

Đây là điểm phân biệt clip-path với một lớp phủ trang trí. Vùng bị cắt bỏ hoàn toàn không nhận sự kiện con trỏ, nên một nút hình tam giác là hình tam giác đối với chuột cũng như với mắt.

Tạo hoạt ảnh giữa các hình dạng

Một đa giác chỉ có thể chuyển mượt sang đa giác khác nếu cả hai liệt kê cùng số điểm. Mẹo thường dùng là bổ sung điểm trùng lặp cho hình đơn giản hơn để số điểm khớp nhau; một hình tam giác viết bằng bốn điểm với hai điểm trùng vị trí có thể biến đổi thành hình vuông.

Dòng -webkit-

Các trình duyệt hiện nay chỉ cần thuộc tính không có tiền tố. Bản có tiền tố được đưa vào vì một số phiên bản Safari cũ vẫn cần nó và giữ lại cũng không tốn gì.

Những gì nó không làm

Nó cắt; nó không bố trí lại. Văn bản xung quanh vẫn coi phần tử như hình chữ nhật ban đầu. Để văn bản bao quanh một hình dạng, bạn cần shape-outside, dùng cùng cú pháp.