CSS Clip-path Maker

CSS Clip-path Maker - Công Cụ Tạo Hình Dạng Trực Quan

CSS clip-path là một trong những thuộc tính mạnh mẽ nhưng ít được dùng đến trong CSS hiện đại — nó cho phép bạn cắt bất kỳ phần tử HTML nào thành các hình dạng hình học bằng đa giác, hình tròn, elip hoặc hình chữ nhật inset, với rendering tăng tốc GPU và hỗ trợ đầy đủ animation và transition CSS. Khó khăn là cú pháp không tha thứ: một hình đa giác yêu cầu nhập tay các cặp tọa độ, và bất kỳ lỗi đánh máy nào âm thầm phá vỡ toàn bộ clip. Trình soạn thảo trực quan này cho phép bạn kéo điểm trên bản xem trước trực tiếp, chuyển đổi giữa các loại hình dạng, áp dụng 12 hình mẫu sẵn (tam giác, chữ nhật, ngũ giác, lục giác, ngôi sao, mũi tên, chữ V, chữ thập, hình thoi, v.v.). Bạn cũng có thể nhập một giá trị clip-path có sẵn để chỉnh sửa trực quan, rồi sao chép CSS sẵn sàng cho sản xuất bao gồm cả tiền tố -webkit-clip-path lẫn clip-path không tiền tố, hoạt động trên Chrome 55+, Firefox 54+, Safari 9.1+ và Edge 79+.

CSS clip-path là gì?

CSS clip-path là thuộc tính tạo vùng cắt để xác định phần nào của phần tử được hiển thị. Các phần bên ngoài vùng cắt sẽ bị ẩn.

Các loại hình dạng:

polygon() - Hình dạng tùy chỉnh với nhiều điểm
circle() - Cắt hình tròn
ellipse() - Cắt hình bầu dục
inset() - Hình chữ nhật với góc bo tùy chọn

Tôi có thể chỉnh sửa một clip-path có sẵn không?

Có. Dán bất kỳ giá trị CSS clip-path có sẵn nào vào ô Nhập clip-path rồi nhấn Nhập — công cụ phát hiện loại hàm, chuyển sang hình dạng tương ứng và điền mọi điểm hoặc điều khiển để bạn tinh chỉnh trực quan. Hoạt động với danh sách tọa độ polygon(), circle(R at CX CY), ellipse(RX RY at CX CY) và inset() với cú pháp rút gọn 1/2/4 giá trị cùng bán kính 'round' tùy chọn.

Đây là cách nhanh nhất để tái cấu trúc một clip-path thừa kế từ stylesheet hoặc design system: thay vì gõ lại từng tọa độ bằng tay, hãy dán, kéo các điểm và sao chép CSS đã cập nhật. Tâm 'at ...' là tùy chọn cho hình tròn và elip, mặc định 50% 50% khi bỏ qua.

closest-side và farthest-side nghĩa là gì với bán kính hình tròn?

circle() và ellipse() chấp nhận bán kính bằng từ khóa ngoài phần trăm. closest-side định kích thước hình sao cho cạnh của nó chạm cạnh hộp gần tâm nhất, còn farthest-side mở rộng đến cạnh xa nhất. closest-corner và farthest-corner tham chiếu các góc hộp.

Ví dụ: circle(closest-side at 50% 50%) luôn vừa bên trong phần tử bất kể tỉ lệ khung. Phần trăm (như circle(40%)) được tính theo một giá trị tham chiếu lấy từ chiều rộng và cao của phần tử, nên bán kính phần trăm có thể vượt ra ngoài hộp với các phần tử không vuông. Dùng từ khóa khi cần vùng cắt giữ trong khung khi thay đổi kích thước. Trình soạn thảo trực quan này dùng phần trăm để kéo chỉnh chính xác; hãy đổi sang bán kính từ khóa bằng tay trong CSS cuối khi cần co giãn responsive.

Làm sao để tạo đa giác clip-path?

Đa giác clip-path sử dụng các điểm tọa độ:

Cú pháp: polygon(x1% y1%, x2% y2%, ...)

Mỗi điểm được xác định bởi phần trăm X và Y:
- 0% 0% = góc trên trái
- 100% 0% = góc trên phải
- 100% 100% = góc dưới phải
- 0% 100% = góc dưới trái
- 50% 0% = giữa trên

Ví dụ tam giác:
polygon(50% 0%, 100% 100%, 0% 100%)

Circle và ellipse hoạt động như thế nào?

Cú pháp circle:
circle(bán-kính at tâmX tâmY)

Ví dụ: circle(50% at 50% 50%)
- Tạo hình tròn với bán kính 50%
- Tâm ở 50% 50% (giữa)

Cú pháp ellipse:
ellipse(bánKínhX bánKínhY at tâmX tâmY)

Ví dụ: ellipse(50% 30% at 50% 50%)
- Tạo hình bầu dục
- Rộng 50%, cao 30%
- Tâm ở giữa

Inset clip-path là gì?

Inset tạo vùng cắt hình chữ nhật với góc bo tùy chọn:

Cú pháp: inset(trên phải dưới trái round bán-kính)

Giá trị thể hiện khoảng cách từ mỗi cạnh:
- inset(10%) - 10% từ tất cả các cạnh
- inset(10% 20%) - 10% trên/dưới, 20% trái/phải
- inset(10% 20% 30% 40%) - giá trị riêng lẻ

Góc bo:
- inset(10% round 20px) - thêm bán kính viền
- inset(10% round 20%) - bán kính phần trăm

Trình duyệt nào hỗ trợ clip-path?

Hỗ trợ trình duyệt cho clip-path:

Hỗ trợ đầy đủ:
- Chrome 55+
- Firefox 54+
- Safari 9.1+ (có thể cần tiền tố -webkit-)
- Edge 79+
- Opera 42+

Để tương thích Safari, thêm:
-webkit-clip-path: polygon(...);
clip-path: polygon(...);

Lưu ý: clip-path không ảnh hưởng đến bố cục phần tử - phần tử vẫn chiếm đầy đủ không gian, chỉ vùng hiển thị thay đổi.

Tôi có thể animate clip-path bằng CSS transitions không?

Có, nhưng chỉ giữa các hình dạng cùng loại với cùng số điểm. Animate giữa polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) và polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) hoạt động vì cả hai có 4 điểm; animate từ đa giác 4 điểm sang đa giác 6 điểm KHÔNG nội suy mượt — trình duyệt nhảy đến trạng thái cuối. Để animate giữa các hình có số điểm khác nhau, định nghĩa hình nhỏ hơn với các điểm liền kề trùng lặp (đa giác suy biến) để cả hai hình chia sẻ cùng số đỉnh. circle() và ellipse() animate sạch sang các circle và ellipse khác, và inset() animate sang các inset khác, nhưng bạn không thể transition giữa các hàm hình dạng khác nhau (polygon sang circle). Mọi animation đều tăng tốc GPU và mượt mà ở 60fps ngay cả trên di động.

clip-path khác với mask-image, overflow:hidden và SVG clipping ra sao?

Bốn cách cắt phần tử, mỗi cách có đánh đổi. clip-path dùng hình dạng hình học (đa giác, hình tròn) và cho cạnh sắc nét với chống răng cưa; tăng tốc GPU và animate tốt. mask-image dùng kênh alpha của ảnh làm mặt nạ, nên hỗ trợ cạnh mềm, gradient và mặt nạ bitmap tùy ý — nhưng nặng hơn để render và hiệu suất animation kém hơn. overflow:hidden kết hợp với phần tử con là một mẹo chỉ tạo được cắt hình chữ nhật; hữu ích cho trình duyệt cũ nhưng kém linh hoạt. SVG <clipPath> là cha của CSS clip-path và hỗ trợ đường dẫn phức tạp hơn bao gồm đường cong bezier, nhưng yêu cầu SVG inline và phá vỡ xếp chồng z-index. Chọn clip-path cho hình dạng hình học và animation, mask-image cho hiệu ứng cạnh mềm, SVG clipPath cho hình bezier phức tạp mà CSS không thể biểu đạt.

Tại sao clip-path không hoạt động trên Safari iOS?

iOS Safari yêu cầu tiền tố -webkit-clip-path bên cạnh thuộc tính clip-path không tiền tố, ngay cả trên các phiên bản iOS 16+ hiện đại. Hai cạm bẫy nữa: (1) Safari không cho phép tham chiếu url() đến SVG clip paths trong các file ngoài — SVG phải inline trong cùng tài liệu; (2) Safari từng có lỗi với clip-path trên các phần tử có CSS filter hoặc backdrop-filter áp dụng, đôi khi bỏ qua hoàn toàn clip. Dùng đầu ra CSS của công cụ này bao gồm cả phiên bản có tiền tố và không tiền tố. Nếu clip-path vẫn thất bại trên iOS, đảm bảo phần tử của bạn không lồng trong cha có filter, transform-style: preserve-3d, hoặc will-change: transform.

Công dụng thực tế của clip-path trong thiết kế thực tế là gì?

Các mẫu sản xuất phổ biến: (1) dải phân chia chéo dùng polygon(0 0, 100% 0, 100% 90%, 0 100%) để tạo các phần trang nghiêng mà không cần HTML thêm; (2) lưới avatar lục giác dùng đa giác 6 điểm cho bố cục ảnh đội hình tổ ong; (3) hiệu ứng tiết lộ animated khi văn bản hoặc hình ảnh mở ra từ một hình tròn mở rộng từ điểm nhấp; (4) hình bong bóng tin nhắn cho UI chat dùng đa giác với khía cắt; (5) bố cục trang nhận biết notch kiểu Apple cắt quanh notch thiết bị; (6) hiệu ứng hover hình ảnh biến đổi giữa hai biến thể hình dạng. Tránh clip-path cho phần tử rất lớn (>4000px) trên thiết bị yếu — chi phí rasterize GPU tăng theo kích thước. Cho đa giác phức tạp (>50 điểm), ưu tiên SVG clipPath hiệu quả bộ nhớ hơn.

Tính năng chính

• 4 loại hình dạng: đa giác, hình tròn, elip, inset
• Chỉnh sửa điểm kéo thả trực quan
• Nhập và sửa giá trị clip-path có sẵn
• Đầu ra kèm tiền tố -webkit- cho Safari/iOS
• 12 hình đa giác có sẵn
• Thêm và xóa điểm đa giác
• Nhập số chính xác cho tất cả giá trị
• Xem trước trực tiếp
• Điều khiển bán kính và vị trí hình tròn
• Elip với bán kính X/Y độc lập
• Inset hỗ trợ bán kính viền
• Sao chép mã CSS
• Thân thiện với thiết bị cảm ứng
• Xử lý 100% phía máy khách
• Hỗ trợ chế độ tối
• Giao diện đáp ứng