Trình Tạo CSS Clip-Path

Công Cụ Này Là Gì?

clip-path là thuộc tính CSS ẩn mọi thứ bên ngoài một vùng xác định của phần tử, chỉ để lại hình dạng bên trong hiển thị — phần còn lại của khung phần tử vẫn tồn tại trong bố cục, chỉ là không được vẽ ra. Nó nhận các hàm hình dạng cơ bản như circle(), ellipse(), inset(), và polygon(), trong đó hàm cuối cùng nhận một danh sách tùy ý các cặp tọa độ x/y để định nghĩa bất kỳ hình dạng cạnh thẳng nào.

Tọa độ polygon() là phần khó viết tay nhất — một ngũ giác, lục giác hay ngôi sao đều cần vài điểm được đặt chính xác, và sai một điểm sẽ làm méo toàn bộ hình dạng. Công cụ này tính toán các tọa độ đó cho bạn từ một hình dạng có sẵn, cập nhật khung xem trước trực tiếp ngay lập tức, và cung cấp chính xác mã CSS clip-path để sao chép.

Nguồn: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — các đặc tả định nghĩa clip-path và các hàm hình dạng cơ bản của nó.

Tại Sao Nên Dùng?

• Xem trước trực tiếp cắt một khung xem trước thực sự theo hình dạng đã chọn, nên bạn thấy kết quả thật thay vì phải tưởng tượng từ tọa độ.
• Bảy hình dạng có sẵn — hình tròn, elip, tam giác, ngũ giác, lục giác, ngôi sao và hình chữ nhật bo góc — bao phủ phần lớn các trường hợp sử dụng clip-path mà không cần tự viết tay các điểm polygon.
• Các hình dạng tròn, elip và hình chữ nhật bo góc có kèm thanh trượt kích thước/độ bo để bạn tinh chỉnh hình dạng mà không cần chỉnh sửa tọa độ.
• Xuất mã CSS clip-path chuẩn, sẵn sàng dán vào bất kỳ phần tử nào.
• Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu. Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

1. Chọn một hình dạng từ menu thả xuống — hình tròn, elip, tam giác, ngũ giác, lục giác, ngôi sao, hoặc hình chữ nhật bo góc.
2. Với hình tròn, elip và hình chữ nhật bo góc, điều chỉnh thanh trượt kích thước/độ bo để tinh chỉnh phần cắt.
3. Xem khung xem trước cập nhật trực tiếp khi bạn thay đổi hình dạng hoặc thanh trượt.
4. Sao chép mã CSS clip-path được tạo ra và dán vào phần tử bạn muốn cắt.
5. Với hình ảnh thay vì màu đặc, áp dụng cùng thuộc tính clip-path cho một thẻ <img> hoặc phần tử có background-image.

Ví dụ

Đầu vào

Shape: Hexagon

Đầu ra

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Một phần cắt lục giác đều, thường dùng cho ảnh đại diện kiểu huy hiệu hoặc biểu tượng tính năng.

Hình dạng cơ bản so với polygon()

Hình tròn, elip và inset (hình chữ nhật bo góc) là các hàm hình dạng cơ bản dựng sẵn của CSS với cú pháp đơn giản riêng — một hoặc hai bán kính, cộng thêm vị trí tâm hoặc độ bo góc tùy chọn. Tam giác, ngũ giác, lục giác và ngôi sao không phải là hình dạng dựng sẵn; tất cả đều được biểu diễn bằng polygon() — một danh sách phẳng các cặp tọa độ x/y vẽ nên đường viền hình dạng. Công cụ này tự động tính các tọa độ đó cho các đa giác đều (cách đều nhau) và ngôi sao năm cánh, đây chính là phần tẻ nhạt nhất để làm đúng bằng tay.

Các mẫu clip-path phổ biến

• Ảnh đại diện hoặc huy hiệu hình tròn: circle() với bán kính trung bình, thường kết hợp với ảnh nguồn hình vuông để hình tròn không bị kéo giãn thành elip.
• Đường phân chia phần nghiêng góc: một đa giác tùy chỉnh (không có sẵn ở đây) làm nghiêng mép trên hoặc dưới của một phần rộng toàn màn hình để tạo điểm ngắt trang không phải hình chữ nhật.
• Biểu tượng đánh giá sao hoặc hình dạng huy hiệu: hình dạng ngôi sao có sẵn, hữu ích như một hình trang trí thay vì vẽ SVG bằng tay cho các trường hợp đơn giản.
• Lưới ảnh lục giác: các ảnh cắt hình lục giác sắp xếp theo kiểu tổ ong, một mẫu phổ biến cho trang portfolio/đội nhóm.
• Hình chữ nhật bo góc như một giải pháp thay thế nhẹ cho border-radius khi bạn cần phần cắt cũng cắt bỏ nội dung con bị tràn ra, vì chỉ riêng border-radius không cắt các phần tử con nếu không có thêm overflow:hidden.

Kết hợp với các công cụ CSS khác

clip-path thường được kết hợp với gradient CSS làm nền bị cắt, hoặc với box-shadow áp dụng cho một phần tử bao bọc (vì clip-path cũng cắt bóng riêng của phần tử, nên bóng đặt trên phần tử cha là cách khắc phục thường dùng cho một hình dạng đã cắt nhưng vẫn cần trông như đang nổi lên).

→ Trình Tạo Gradient CSS · Trình Tạo Border Radius · Trình Tạo Box Shadow

Câu Hỏi Thường Gặp