Trình tạo clip-path CSS
Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.
clip-path trong CSS là gì?
clip-path là thuộc tính CSS cắt một phần tử theo hình dạng cơ bản hoặc đường dẫn. Mọi thứ bên ngoài hình dạng bị ẩn đi, nhờ đó bạn có thể biến ảnh hoặc khối chữ nhật thành tam giác, hình tròn, lục giác, banner nghiêng hoặc bất kỳ đa giác tùy chỉnh nào mà không cần chỉnh sửa ảnh.
Những trình duyệt nào hỗ trợ clip-path?
Tất cả trình duyệt hiện đại đều hỗ trợ các hàm hình dạng cơ bản mà công cụ này dùng: polygon(), circle(), ellipse() và inset(), bao gồm Chrome, Edge, Firefox, Safari và Opera. Tiền tố -webkit-clip-path chỉ cần cho các phiên bản Safari di động rất cũ.
Chế độ polygon hoạt động thế nào?
Ở chế độ polygon, phần xem trước hiển thị mỗi đỉnh là một điểm kéo thả được. Kéo điểm để di chuyển, nhấp đúp vào vùng trống để thêm điểm mới, nhấp vào điểm để chọn rồi bấm nút xóa để loại bỏ. Giá trị CSS được cập nhật theo thời gian thực với tọa độ phần trăm.
Phần trăm trong polygon() nghĩa là gì?
Mỗi đỉnh được viết là cặp X Y theo phần trăm, tính từ góc trên bên trái của phần tử. Vì giá trị tương đối với kích thước phần tử nên hình dạng co giãn theo và luôn responsive ở mọi độ rộng màn hình.
circle, ellipse và inset khác nhau thế nào?
circle(bán kính at x y) cắt hình tròn với một bán kính, ellipse(rx ry at x y) cho phép bán kính ngang và dọc khác nhau, còn inset(trên phải dưới trái) cắt hình chữ nhật thụ vào từ mỗi cạnh. Công cụ này cung cấp thanh trượt và ô nhập số cho mọi tham số.
clip-path có ảnh hưởng bố cục hoặc lượt nhấp không?
clip-path chỉ là hiệu ứng hình ảnh. Phần tử vẫn giữ hộp ban đầu trong bố cục nên không gì xung quanh dịch chuyển. Tuy nhiên các sự kiện con trỏ như nhấp chuột chỉ có tác dụng trong vùng hiển thị đã cắt, rất tiện để làm nút hình dạng tùy chỉnh.
Có thể tạo hiệu ứng động cho clip-path không?
Có. Trình duyệt chuyển đổi mượt giữa hai giá trị clip-path khi hàm hình dạng và số điểm trùng khớp, ví dụ từ inset lớn sang nhỏ, hoặc giữa hai đa giác có cùng số đỉnh. Hãy dùng thuộc tính CSS transition để tạo hiệu ứng.
Ảnh hoặc dữ liệu của tôi có bị tải lên đâu không?
Không. Ảnh xem trước là dải màu vẽ cục bộ trên canvas và mọi phép tính diễn ra trong trình duyệt của bạn. Không có gì được gửi lên máy chủ, nên công cụ vẫn dùng được offline sau khi tải.
clip-path thường được dùng vào việc gì?
Các ứng dụng phổ biến gồm khu hero nghiêng, mặt nạ avatar lục giác hoặc tròn, mũi bong bóng hội thoại tam giác, collage ảnh sáng tạo, góc thẻ vát và nút hình dạng độc đáo — tất cả không cần phần mềm chỉnh sửa ảnh.
Cách sử dụng Trình tạo clip-path CSS
Tạo hình cho bất kỳ phần tử nào bằng CSS clip-path thay vì chỉnh ảnh. Chọn hàm hình dạng, kéo các tay nắm, và sao chép CSS dùng ngay được. Mọi thứ chạy cục bộ trong trình duyệt của bạn.
- Chọn một chế độ: Đa giác, Hình tròn, Elip hoặc Inset.
- Trong chế độ Đa giác, kéo các chấm đỉnh, nhấp đúp vào chỗ trống để thêm điểm, và chọn một điểm trước khi xóa.
- Ở các chế độ Hình tròn, Elip và Inset, tinh chỉnh từng giá trị bằng thanh trượt hoặc gõ phần trăm chính xác.
- Xem bản xem trước trực tiếp cập nhật trên ảnh mẫu gradient được tạo cục bộ.
- Sao chép quy tắc clip-path một dòng và dán vào bảng định kiểu của bạn.
Giữ nguyên số điểm đa giác giữa hai trạng thái và bạn có thể tạo hoạt cảnh mượt cho hình dạng bằng một transition CSS.
Công cụ liên quan
- Trình tạo Box Shadow CSS Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.
- Làm đẹp CSS Định dạng và làm đẹp mã CSS ngay lập tức. Chuyển đổi CSS đã nén thành mã dễ đọc với các tùy chọn tùy chỉnh.
- Trình nén CSS Trình nén CSS trực tuyến miễn phí. Nén và tối ưu hóa mã CSS ngay lập tức bằng cách loại bỏ khoảng trắng, nhận xét và ký tự không cần thiết. Giảm kích thước tệp để tăng hiệu suất web.