Bộ tạo clip-path cho CSS

Năm hàm hình dạng

Các đoạn đa giác phổ biến

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Đường chéo của khối hero có lẽ là kiểu được dùng phổ biến nhất, nó mang lại cho khối đó vẻ ngoài hiện đại, nghiêng góc mà không cần bất kỳ tệp SVG nào.

Tạo hoạt ảnh cho clip-path

clip-path có thể tạo hoạt ảnh miễn là cả hai trạng thái dùng cùng một hàm hình dạng với cùng số điểm. Một đa giác 4 đỉnh sẽ chuyển động mượt mà sang một đa giác 4 đỉnh khác; việc thêm hoặc bớt đỉnh sẽ phá vỡ phép nội suy.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Hãy dùng kỹ thuật này cho các hiệu ứng xuất hiện, biến dạng tinh tế khi di chuột, hoặc chuyển cảnh giữa các trang.

clip-path so với overflow: hidden

overflow: hidden cắt theo hình chữ nhật của border-box (có thể bo tròn bằng border-radius). clip-path cắt theo bất kỳ hình dạng nào bạn định nghĩa và cắt mọi thứ, bao gồm cả bóng đổ và đường viền. Nếu bạn cần bóng đổ vẫn hiển thị bên ngoài hình dạng thì clip-path không phải lựa chọn phù hợp.

filter: drop-shadow() có thể thêm lại một bóng đổ bám theo hình dạng cho các phần tử dùng clip-path, nhưng chậm hơn.

Hiệu suất

Trong các trình duyệt hiện đại, clip-path được tăng tốc bằng GPU, nên các clip-path động chạy rất mượt. Ngoại lệ là path() và những đa giác cực kỳ phức tạp (hơn 40 đỉnh), vốn chuyển sang kết xuất bằng CPU trên một số trình duyệt.

Khả năng truy cập

clip-path chỉ thay đổi phần hiển thị. Trình đọc màn hình, tiêu điểm bàn phím và sự kiện con trỏ vẫn căn theo toàn bộ hộp của phần tử, chứ không theo hình dạng đã cắt. Nếu một hình ảnh bị cắt thành hình ngôi sao thì văn bản alt vẫn được đọc bình thường. Nếu một nút bị cắt thành hình chevron thì vùng nhấp là toàn bộ hình chữ nhật, chứ không phải hình chevron nhìn thấy, điều này có thể khiến người dùng nhấp nhầm vào khoảng tưởng như trống.

Với các nút có hình dạng cắt khác thường, hãy đặt chiều rộng và chiều cao của phần tử thật sát để vùng nhấp (hitbox) khớp tương đối tốt với vùng hiển thị.