Đường dẫn clip css: đa giác
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 Đế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
Đã từng có một tài sản 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
Bốn giá trị đó trong clip: rect(); cũCác giá trị có thể khác
Ví dụ đường dẫn clip SVG
Thật kỳ lạ khi 0 ngay từ đầu, vì 0 đã là một thứ dành cho các thuộc tính như 2. Mặc dù vậy, Firefox đã hỗ trợ cho nó ngay bây giờ và chúng tôi đang chờ phần còn lại của các trình duyệt. Xem Triển khai ban đầu của clip-path. đường dẫn();Làm của riêng bạnCho đến khi chúng tôi có thể sử dụng 0 một cách đáng tin cậy, các clip hữu ích nhất cho các hình dạng tùy chỉnh ưa thích là 4. Đây là một trình chỉnh sửa thực sự gọn gàng dành cho những người từ Mads Stoumann (cũng hoạt động với hình tròn và hình elip)Dự phòng nhúng CodePen Thêm thông tin
Hỗ trợ trình duyệtDữ 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 |