CSS Clip-Path Generator

Tính năng nổi bật

• Mười ba hình dạng dựng sẵn gồm tam giác, hình thang, hình bình hành, hình thoi, ngũ giác, lục giác, bát giác, ngôi sao, chữ thập, mũi tên, hình tròn, hình elip và khung cắt lề
• Thanh trượt riêng cho hình tròn gồm bán kính, tọa độ tâm theo chiều ngang và chiều dọc
• Thanh trượt riêng cho khung cắt lề gồm bốn cạnh trên, phải, dưới, trái và độ bo góc
• Khối xem trước áp dụng hình cắt thật, cập nhật ngay khi bạn kéo thanh trượt
• Bảng chọn màu để đổi màu nền khối xem trước, giúp nhìn rõ đường cắt
• Hiển thị nguyên văn giá trị clip-path đang áp dụng
• Nút sao chép ra dòng CSS hoàn chỉnh kèm tên thuộc tính
• Chạy hoàn toàn trên trình duyệt, không cần đăng ký và không gọi máy chủ

Cắt hình bằng CSS thay vì bằng ảnh có gì hơn

Cách làm cũ để có một khối lục giác hay một dải chéo trên trang là xuất ảnh từ phần mềm thiết kế rồi đặt đè lên. Cách đó có bốn nhược điểm rất rõ: ảnh phải tải thêm nên trang chậm hơn, ảnh có nền cố định nên đổi màu chủ đề là phải xuất lại, ảnh không co giãn mượt theo kích thước khối, và mỗi lần khách hàng muốn chỉnh độ nghiêng một chút là phải quay lại phần mềm thiết kế. Thuộc tính clip-path bỏ hết bốn nhược điểm đó vì hình dạng được mô tả bằng vài con số ngay trong tệp CSS: không tải thêm gì, đổi màu chỉ là đổi thuộc tính nền, co giãn theo phần trăm nên luôn khớp khối chứa, và sửa hình là sửa vài chữ số. Việc còn lại chỉ là viết đúng chuỗi tọa độ, mà chuỗi tọa độ của một ngôi sao mười điểm thì không ai gõ tay được — đó là lý do một bộ hình dựng sẵn kèm xem trước tiết kiệm rất nhiều thời gian.

Lợi ích khi sử dụng

• •Không phải tải thêm ảnh chỉ để có một hình dạng trang trí
• •Hình co giãn theo kích thước khối chứa nên luôn khớp trên mọi màn hình
• •Đổi màu và đổi kích thước chỉ bằng CSS, không cần quay lại phần mềm thiết kế
• •Có sẵn chuỗi tọa độ cho những hình phức tạp mà gõ tay rất mất công
• •Thấy ngay kết quả trên khối xem trước trước khi đưa vào dự án

Cách tạo một hình cắt

1. 1Chọn hình dạng trong danh sách thả xuống, khối xem trước sẽ đổi ngay theo lựa chọn.
2. 2Nếu chọn hình tròn, kéo ba thanh trượt bán kính và tọa độ tâm cho tới khi vừa ý.
3. 3Nếu chọn khung cắt lề, kéo bốn thanh trượt của bốn cạnh cùng thanh độ bo góc.
4. 4Đổi màu nền khối xem trước nếu cần nhìn rõ đường cắt trên nền trang hiện tại.
5. 5Bấm nút sao chép rồi dán dòng CSS vào lớp tương ứng trong dự án của bạn.

clip-path làm gì và quan trọng hơn là không làm gì

Thuộc tính này cắt phần hiển thị của một phần tử theo hình bạn mô tả: phần nằm ngoài hình bị ẩn hoàn toàn, kể cả nền, viền, bóng đổ và mọi phần tử con bên trong. Nhưng có một điều rất nhiều người hiểu nhầm: clip-path không hề thay đổi bố cục. Một khối vuông 300 pixel cắt thành tam giác vẫn chiếm trọn 300 nhân 300 pixel trong luồng bố cục, nội dung xung quanh vẫn né đúng khối vuông đó chứ không ôm theo cạnh chéo của tam giác. Nếu bạn muốn chữ chảy quanh một hình không phải chữ nhật, thứ bạn cần là thuộc tính shape-outside chứ không phải clip-path, và hai thuộc tính này thường được dùng cùng nhau với cùng một giá trị hình. Một điểm hay nữa là phần bị cắt đi cũng không nhận sự kiện chuột, nên một nút bấm cắt thành hình tròn sẽ chỉ bấm được đúng trong vùng tròn, đúng như trực giác — khác hẳn với cách bo góc bằng border-radius trên các trình duyệt đời cũ.

Bốn dạng hàm và cách đọc chuỗi tọa độ polygon

Có bốn dạng hàm hay dùng. Hàm inset cắt vào từ bốn cạnh, nhận từ một tới bốn giá trị theo đúng quy ước viết tắt quen thuộc của lề và đệm, kèm tùy chọn bo góc phía sau từ khóa round. Hàm circle nhận bán kính rồi tới từ khóa at và tọa độ tâm. Hàm ellipse tương tự nhưng có hai bán kính cho hai trục. Hàm polygon nhận một danh sách các cặp tọa độ cách nhau bằng dấu phẩy, mỗi cặp gồm giá trị ngang trước rồi giá trị dọc sau, tính từ góc trên bên trái của khối. Đọc thử chuỗi tam giác trong công cụ sẽ thấy rất rõ: điểm đầu nằm ở chính giữa cạnh trên, điểm thứ hai ở góc dưới bên trái, điểm thứ ba ở góc dưới bên phải. Các điểm được nối theo đúng thứ tự bạn viết rồi khép kín tự động, nên đảo thứ tự hai điểm giữa danh sách sẽ tạo ra một hình tự cắt chéo trông rất lạ. Ngoài bốn hàm trên còn có hàm path nhận cú pháp đường dẫn của SVG, dùng khi cần đường cong tự do mà polygon không mô tả được.

Hai dạng chỉnh được bằng thanh trượt và cách tính bán kính phần trăm

Trong mười ba hình dựng sẵn, chỉ hình tròn và khung cắt lề có bộ thanh trượt; mười một hình còn lại là chuỗi tọa độ cố định mà bạn phải sửa tay sau khi sao chép nếu muốn đổi tỷ lệ. Với khung cắt lề, bốn thanh trượt tương ứng bốn cạnh và thanh cuối cùng thêm phần bo góc tính bằng pixel, rất tiện khi bạn cần một khung ảnh bo tròn có viền trắng đều bốn phía. Với hình tròn có một chi tiết dễ gây bất ngờ: khi bán kính viết theo phần trăm và khối không phải hình vuông, con số phần trăm đó không tính theo chiều rộng cũng không theo chiều cao, mà theo đường chéo quy đổi của khối. Cụ thể là căn bậc hai của tổng bình phương chiều rộng và chiều cao, chia cho căn bậc hai của hai. Vì vậy đặt bán kính 50 phần trăm trên một khối chữ nhật dài sẽ cho hình tròn lớn hơn bạn tưởng và tràn ra ngoài hai cạnh ngắn. Nếu muốn hình tròn luôn nội tiếp bất kể tỷ lệ khối, hãy thay con số phần trăm bằng từ khóa closest-side.

Tạo chuyển động cho clip-path: quy tắc cùng số điểm

Thuộc tính này chuyển động được, và đó là cách làm nên nhiều hiệu ứng lộ nội dung rất đẹp mà không cần thư viện nào. Nhưng có một quy tắc bắt buộc: trình duyệt chỉ nội suy mượt giữa hai giá trị polygon khi chúng có đúng cùng số điểm và cùng quy tắc tô. Chuyển từ một tam giác ba điểm sang một lục giác sáu điểm sẽ không cho hiệu ứng biến hình mà chỉ nhảy đột ngột giữa hai trạng thái. Cách vòng qua là viết cả hai trạng thái với cùng số điểm, thêm các điểm trùng nhau vào hình đơn giản hơn cho đủ số lượng. Tương tự, không nội suy được giữa hai dạng hàm khác nhau, ví dụ từ circle sang polygon. Một ứng dụng rất thực dụng là hiệu ứng lộ dần: bắt đầu bằng inset cắt hết một phía rồi chuyển về inset bằng không, cho cảm giác nội dung được kéo màn ra. Về hiệu năng, chuyển động clip-path buộc trình duyệt vẽ lại mỗi khung hình nên đừng áp cho quá nhiều phần tử cùng lúc, và nhớ bọc trong truy vấn prefers-reduced-motion.

Ba bất ngờ thường gặp khi đưa clip-path vào dự án thật

Thứ nhất là viền răng cưa. Cạnh chéo do clip-path tạo ra không phải lúc nào cũng được làm mượt, nên trên một số trình duyệt bạn sẽ thấy đường bậc thang rõ rệt ở cạnh nghiêng, đặc biệt khi khối lớn. Cách khắc phục thông dụng là thêm một biến đổi rất nhẹ để buộc trình duyệt kết xuất qua lớp tăng tốc, hoặc chuyển sang dùng SVG cho những hình cần cạnh thật sắc nét. Thứ hai là chuyện ngữ cảnh xếp lớp: một phần tử có clip-path khác giá trị none sẽ tạo ra ngữ cảnh xếp lớp mới và trở thành khối chứa cho các phần tử con định vị cố định. Hậu quả rất khó đoán: một hộp thoại hay thanh điều hướng đặt position cố định nằm bên trong phần tử đã cắt sẽ neo theo phần tử đó thay vì theo cửa sổ trình duyệt. Thứ ba là khả năng tiếp cận: nội dung bị cắt đi vẫn nằm nguyên trong cây tài liệu, vẫn được trình đọc màn hình đọc, vẫn tìm được bằng chức năng tìm kiếm của trình duyệt và vẫn sao chép được. Vì vậy tuyệt đối đừng dùng clip-path để ẩn chữ mà bạn không muốn ai thấy.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• css clip-path
• clip-path generator
• tạo hình bằng css
• polygon css là gì
• cắt hình bằng css
• css tam giác
• css lục giác
• css ngôi sao
• inset css clip-path
• circle css clip-path
• clip-path và mask-image
• shape-outside css
• hiệu ứng chuyển động clip-path
• clip-path path svg
• cạnh chéo trong thiết kế web
• banner chéo css
• clip-path stacking context
• css hình dạng không cần ảnh
• công cụ css online miễn phí
• clip-path trình duyệt hỗ trợ