Việc sử dụng tính năng cắt đoạn trong CSS có thể giúp chúng ta tránh được mọi thứ trong thiết kế trông giống như một chiếc hộp. Bằng cách sử dụng nhiều hình dạng cơ bản hoặc SVG, bạn có thể tạo đường dẫn đoạn video. Sau đó, cắt bớt những phần của thành phần bạn không muốn hiển thị.
Tất cả các phần tử trên trang web đều được xác định trong một hộp hình chữ nhật.
Tuy nhiên, điều đó không có nghĩa là chúng ta phải làm cho mọi thứ trông giống như một chiếc hộp.
Bạn có thể sử dụng thuộc tính clip-path của CSS để cắt bớt các phần của hình ảnh hoặc phần tử khác nhằm tạo ra hiệu ứng thú vị.
Trong ví dụ trên, hình ảnh bong bóng là hình vuông (nguồn).
Sử dụng clip-path và giá trị hình dạng cơ bản của circle()
bầu trời bổ sung xung quanh bong bóng sẽ bị cắt bớt để lại một hình tròn trên trang.
Vì hình ảnh này là một đường liên kết nên bạn có thể thấy thông tin khác về thuộc tính clip-path.
Bạn chỉ có thể nhấp vào khu vực hiển thị của hình ảnh, vì sự kiện không kích hoạt trên những phần ẩn của hình ảnh.
Bạn có thể áp dụng tính năng cắt xén cho mọi phần tử HTML, không chỉ hình ảnh.
Có một vài cách để tạo clip-path. Trong bài đăng này, chúng ta sẽ tìm hiểu về chúng.
Khả năng tương thích với trình duyệt
Đối với các trình duyệt cũ, tính năng dự phòng có thể cho phép trình duyệt bỏ qua thuộc tính clip-path và hiển thị hình ảnh chưa bị cắt.
Nếu đây là vấn đề, bạn có thể kiểm thử clip-path trong truy vấn tính năng và cung cấp bố cục thay thế cho các trình duyệt không hỗ trợ.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Hình dạng cơ bản
Thuộc tính clip-path có thể nhận một số giá trị.
Giá trị được sử dụng trong ví dụ ban đầu là circle().
Đây là một trong các giá trị hình dạng cơ bản, được xác định trong thông số kỹ thuật Hình dạng CSS.
Tức là bạn có thể cắt một vùng, đồng thời cũng sử dụng cùng một giá trị cho shape-outside để khiến văn bản bao bọc xung quanh hình dạng đó.
Dưới đây là danh sách đầy đủ các hình dạng cơ bản:
inset()
Giá trị inset() sẽ lồng vùng bị cắt từ cạnh của phần tử và có thể là các giá trị được truyền cho cạnh trên, cạnh phải, cạnh dưới và cạnh trái.
Bạn cũng có thể thêm border-radius để vẽ cong các góc của vùng bị cắt bằng cách sử dụng từ khoá round.
Trong ví dụ của tôi, tôi có hai hộp đều có một lớp .box.
Hộp đầu tiên không có đoạn cắt, hộp thứ hai được cắt bằng cách sử dụng các giá trị inset().
circle()
Như bạn đã thấy, giá trị circle() tạo ra một vùng bị cắt hình tròn.
Giá trị đầu tiên là độ dài hoặc phần trăm và là bán kính của vòng tròn.
Giá trị tùy chọn thứ hai cho phép bạn đặt tâm vòng tròn.
Trong ví dụ bên dưới, tôi đang sử dụng các giá trị từ khóa để đặt vòng tròn được cắt của mình ở trên cùng bên phải.
Bạn cũng có thể sử dụng độ dài hoặc tỷ lệ phần trăm.
Chú ý đến cạnh phẳng!
Lưu ý với tất cả các giá trị này, hình dạng sẽ bị cắt bớt bởi ô lề trên phần tử. Nếu bạn tạo một hình tròn trên hình ảnh và hình dạng đó mở rộng ra bên ngoài kích thước tự nhiên của hình ảnh, bạn sẽ có cạnh phẳng.
circle(50%). Vì hình ảnh này không phải là hình vuông, nên chúng ta nhấn vào ô lề ở trên cùng và dưới cùng, đồng thời vòng tròn được cắt bớt.ellipse()
Về cơ bản, hình elip là một vòng tròn cạnh phẳng, vì vậy hoạt động rất giống với circle() nhưng chấp nhận bán kính của x và bán kính của y, cộng với giá trị cho tâm của hình elip.
polygon()
Giá trị polygon() có thể giúp bạn tạo các hình dạng khá phức tạp, xác định số lượng điểm tuỳ ý bằng cách đặt toạ độ của từng điểm.
Để giúp bạn tạo đa giác và xem những gì có thể, hãy xem Clippy,
trình tạo clip-path,
sau đó sao chép và dán mã vào dự án của riêng bạn.
Hình dạng theo giá trị hộp
Cũng được định nghĩa trong Hình dạng CSS là các hình dạng từ giá trị hộp.
Các đối tượng này liên quan đến Mô hình hộp CSS – hộp nội dung, hộp khoảng đệm, hộp đường viền và hộp lề với các giá trị từ khoá là content-box, border-box, padding-box và margin-box.
Các giá trị này có thể được sử dụng riêng hoặc kết hợp với một hình dạng cơ bản để xác định hộp tham chiếu mà hình dạng sử dụng. Ví dụ: Thao tác sau đây sẽ cắt hình dạng theo cạnh của nội dung.
.box {
clip-path: content-box;
}
Trong ví dụ này, vòng tròn sẽ sử dụng content-box làm hộp tham chiếu thay vì margin-box (mặc định).
.box {
clip-path: circle(45%) content-box;
}
Hiện tại, trình duyệt không hỗ trợ sử dụng giá trị hộp cho thuộc tính clip-path.
Tuy nhiên, chúng được hỗ trợ cho shape-outside.
Sử dụng phần tử SVG
Để có nhiều quyền kiểm soát hơn đối với vùng bị cắt so với các hình dạng cơ bản, hãy sử dụng phần tử SVG clipPath.
Sau đó, hãy tham chiếu mã nhận dạng đó, dùng url() làm giá trị cho clip-path.
Tạo ảnh động cho vùng bị cắt
Bạn có thể áp dụng các hiệu ứng chuyển đổi và ảnh động CSS cho clip-path để tạo một số hiệu ứng thú vị.
Trong ví dụ tiếp theo này, tôi sẽ tạo ảnh động cho một vòng tròn khi di chuột bằng cách chuyển đổi giữa hai vòng tròn có giá trị bán kính khác nhau.
Có rất nhiều cách sáng tạo để sử dụng ảnh động kèm với các đoạn cắt. Tạo ảnh động bằng đường dẫn đoạn video trên CSS Tricks có một số ý tưởng xem qua.
Ảnh chụp của Matthew Henry trên Burst.