Trình tạo CSS Clip-path
Công cụ tạo CSS clip-path tạo giá trị clip-path cho các hình phổ biến — tam giác, mũi tên, ngũ giác, lục giác, ngôi sao, chevron, hình tròn, elip và inset bo góc — kèm xem trước trực tiếp.
Về công cụ này
Công cụ tạo CSS clip-path tạo giá trị clip-path cho các hình phổ biến — tam giác, mũi tên, ngũ giác, lục giác, ngôi sao, chevron, hình tròn, elip và inset bo góc — kèm xem trước trực tiếp.
Cách sử dụng
- Chọn một hình trong danh sách.
- Chọn màu tô cho phần xem trước.
- Bấm Copy CSS và áp dụng clip-path cho bất kỳ phần tử hoặc hình ảnh nào.
Điều nên biết
- clip-path ẩn mọi thứ nằm ngoài hình dạng, nên bạn không cần mask ảnh hay tệp SVG.
- polygon() nhận danh sách các điểm x y theo phần trăm, tự co giãn theo phần tử.
- circle(50% at 50% 50%) cắt phần tử thành hình tròn ở giữa.
- inset() kết hợp round sẽ bo tròn các góc của vùng cắt hình chữ nhật.
- Các hình cơ bản của clip-path được hỗ trợ trên mọi trình duyệt lớn hiện nay.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để cắt ảnh thành hình bằng CSS?
Áp dụng clip-path cho ảnh, ví dụ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); để có hình tam giác.
clip-path và mask khác nhau thế nào?
clip-path cắt theo hình vector có cạnh sắc. mask dùng ảnh hoặc gradient và có thể tạo cạnh mềm, trong suốt một phần.
clip-path có tạo hiệu ứng chuyển động được không?
Có, nếu cả hai hình dùng cùng một hàm và cùng số điểm, trình duyệt có thể chuyển tiếp giữa chúng.
clip-path có ảnh hưởng đến thao tác nhấp chuột không?
Có. Vùng nằm ngoài hình bị cắt sẽ không được hiển thị và không nhận sự kiện con trỏ.