hôm nay mình sẽ giới thiệu cho các bạn thuộc tính đường dẫn clip nhé. Nó sẽ giúp chúng ta trong việc cắt hình ảnh phức tạp. Ví dụ như hình dưới đây, thay vì mình dùng hình thì mình sẽ dùng clip-path nhé
Các số trên mô tả mô tả tọa độ của các điểm tương ứng. Nó sẽ hoạt động theo trục ngang và các điểm nối lại với nhau để tạo ra hình mà mình cần, mình tưởng tượng trục x là ngang, trục y là trục dọc thì các bạn nghĩ tí là ra ngay trên thôi nè.
Thuộc tính này khó ở cách hiểu hơi thôi, còn lại mình bê nguyên các biến độ đó vào trong hàm đa giác như hình dưới là xong rồi
Bạn có thể kiểm tra kết quả mình đã làm ví dụ dưới đây để hiểu rõ hơn về cách hoạt động của clip-path nhé
Xem cây bút
Untitled by Phạm Văn Tú [@phm-vn-t]
trên CodePen
Đến đây mình nghĩ các bạn cũng hiểu được phần nào về cách hoạt động của clip-path rồi, sau này mình dùng những trang có sẵn như clippy thì ta hiểu cách hoạt động cũng như các thông số bên trong hàm đa giác rồi thì mình dễ . v
Hy vọng qua bài viết này sẽ giúp ae trong công việc làm những hình phức tạp trong thiết kế dễ dàng hơn thay vì dùng hình trong thiết kế nha hehe
Thuộc tính clip-path trong CSS cho phép bạn chỉ định một vùng cụ thể của một phần tử để hiển thị, với phần còn lại bị ẩn [hoặc “cắt bớt”] đi
.clip-me {
/* Example: clip away the element from the top, right, bottom, and left edges */
clip-path: inset[10px 20px 30px 40px]; /* or "none" */
/* Example: clip element into a Heptagon */
clip-path: polygon[50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%];
/* Deprecated version */
position: absolute; /* absolute or fixed positioning required */
clip: rect[110px, 160px, 170px, 60px]; /* or "auto" */
/* values descript a top/left point and bottom/right point */
} Đã từng có một tài sản clip, nhưng lưu ý rằng đó là
Trường hợp sử dụng phổ biến nhất sẽ là một hình ảnh, nhưng nó không giới hạn ở đó. Bạn có thể dễ dàng áp dụng clip-path cho thẻ đoạn văn và chỉ một phần của văn bản
I'll be clipped.
Bốn giá trị đó trong inset[] [trong CSS ở trên] đại diện cho điểm trên cùng/bên trái và điểm dưới cùng/bên phải, tạo thành hình chữ nhật có thể nhìn thấy. Mọi thứ bên ngoài hình chữ nhật đó đều bị ẩn
clip: rect[]; cũCác giá trị có thể khác
.clip-me {
/* referencing path from an inline SVG */
clip-path: url[#c1];
/* referencing path from external SVG */
clip-path: url[path.svg#c1];
/* polygon */
clip-path: polygon[5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%];
/* circle */
clip-path: circle[30px at 35px 35px];
/* ellipse */
clip-path: ellipse[65px 30px at 125px 40px];
/* inset-rectangle[] may replace inset[] ? */
/* rectangle[] coming in SVG 2 */
/* rounded corners.. not sure if a thing anymore */
clip-path: inset[10% 10% 10% 10% round 20%, 20%];
}Ví dụ đường dẫn clip SVG
Thật kỳ lạ khi clip-path không hỗ trợ chức năng
I'll be clipped.
I'll be clipped.
I'll be clipped.
Làm của riêng bạn
Cho đến khi chúng tôi có thể sử dụng
I'll be clipped.
I'll be clipped.
Dự phòng nhúng CodePen
Thêm thông tin
- Cắt và tạo mặt nạ trong CSS
- đường dẫn clip trên WPD
- đường dẫn clip trên MDN
- Clippy. Trình tạo đường dẫn clip của Bennett Feely
- Cắt và tạo mặt nạ trên MDN
- Thuộc tính CSS Clip [không dùng nữa] [Web ấn tượng]
- Thông số kỹ thuật về mặt nạ CSS
- Mặt nạ CSS của Dirk Schulze
- Clipping trong CSS và SVG – Thuộc tính và phần tử đường dẫn clip của Sara Soueidan
- Đường dẫn clip được gắn thẻ bút trên CodePen
- Bản demo và trình duyệt hỗ trợ bản demo Pen by Yoksel
- Mặt nạ SVG của Jakob Jenkov
- Nghiên cứu của Alan Greenblatt về các mức hỗ trợ của trình duyệt đối với các tính năng cắt và tạo mặt nạ
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên