Trình Tạo CSS Clip-Path
Kéo các điểm trên khung xem trước để thay đổi hình dạng. Nhấp đúp vào một điểm để xóa, hoặc nhấp vào chấm trên cạnh để thêm điểm mới.
Hình Cơ Bản
Hình Nâng Cao
Hình Tùy Chỉnh
Sao chép CSS được tạo và áp dụng vào các phần tử HTML của bạn:
Trình Tạo CSS Clip-Path - Tạo Hình Dạng & Hiệu Ứng Tùy Chỉnh
Trình Tạo CSS Clip-Path là công cụ trực quan miễn phí biến thuộc tính clip-path vốn khó nhằn thành trải nghiệm chỉ-trỏ-và-kéo. Chọn một hình từ thư viện, chuyển đổi giữa các loại hình tròn, elip, chữ nhật và đa giác, rồi kéo trực tiếp các điểm trên khung xem trước để tạo đúng hình dáng bạn muốn. Trong khi bạn thao tác, công cụ tự động viết ra CSS sạch sẵn sàng dán (hoặc giá trị Tailwind) để bạn không bao giờ phải tính toán một tọa độ nào bằng tay.
Cách Sử Dụng Trình Tạo Clip-Path
Chọn một tab loại hình hoặc nhấp vào bất kỳ thumbnail nào trong Thư Viện Hình Dạng để tải một mẫu làm điểm khởi đầu.
Với đa giác, kéo các điểm trên khung xem trước, nhấp đúp vào một điểm để xóa, hoặc nhấp vào chấm trên cạnh để thêm điểm. Với các loại khác, tinh chỉnh bằng thanh trượt.
Đổi nền sang gradient, ô cờ hoặc ảnh của riêng bạn, thay đổi kích thước khung xem trước, và bật đường viền vùng bị cắt để thấy chính xác phần nào bị ẩn.
Chọn đầu ra CSS hoặc Tailwind, bật tiền tố -webkit- nếu cần, rồi sao chép code được tạo thẳng vào dự án của bạn.
Tính Năng Chính
Tạo hình đa giác bằng cách kéo các điểm trực tiếp trên khung xem trước, với nhấp-để-thêm và nhấp-đúp-để-xóa để kiểm soát toàn diện.
Duyệt hơn 25 mẫu được hiển thị dưới dạng thumbnail cắt thật, chia thành nhóm hình cơ bản, nâng cao và tùy chỉnh.
Chuyển đổi tức thì giữa hình tròn, elip, chữ nhật (inset) và đa giác, mỗi loại có bộ điều khiển riêng.
Thử hình dạng trên nền gradient, ô cờ hoặc ảnh tải lên, và hiển thị vùng bị cắt bỏ bằng đường viền mờ.
Điều chỉnh chiều rộng và chiều cao khung xem trước để kiểm tra cách hình dạng dựa trên phần trăm phản ứng với các tỉ lệ khác nhau.
Xuất CSS sạch với tiền tố -webkit- tùy chọn, hoặc giá trị Tailwind sẵn dùng, với sao chép một cú nhấp.
Các Trường Hợp Sử Dụng Phổ Biến
Cắt ảnh thành hình lục giác, hình tròn hoặc hình dáng tùy chỉnh cho ảnh đại diện, thư viện và ảnh hero.
Tạo cạnh nghiêng, vát hoặc dạng sóng giữa các phần trang để có bố cục hiện đại, sống động.
Thiết kế nút, huy hiệu, thẻ và phần tử điều hướng độc đáo, thoát khỏi khuôn hình chữ nhật.
Tạo hoạt hình clip-path bằng CSS transition để xây dựng hiệu ứng reveal, hover và loading mượt mà.
Hình dạng dựa trên phần trăm co giãn linh hoạt, nên việc cắt hình luôn nhất quán trên mọi kích thước màn hình.
Thử nghiệm hình dạng một cách trực quan và lấy code sẵn sàng cho production trong vài giây cho bất kỳ ý tưởng thiết kế nào.
Câu Hỏi Thường Gặp
Thuộc tính CSS clip-path là gì?
clip-path xác định vùng hiển thị của một phần tử; mọi thứ bên ngoài vùng đó sẽ bị cắt bỏ. Nó hỗ trợ các hình cơ bản như circle(), ellipse() và inset(), cũng như đường polygon() tùy chỉnh.
Làm sao để chỉnh sửa một hình đa giác?
Chọn tab Đa Giác hoặc một mẫu đa giác, rồi kéo các điểm trên khung xem trước trực tiếp. Nhấp đúp vào một điểm để xóa, hoặc nhấp vào chấm nhỏ trên cạnh bất kỳ để chèn điểm mới.
Tôi có cần tiền tố -webkit- không?
Các trình duyệt hiện đại hỗ trợ thuộc tính clip-path không cần tiền tố, nhưng thêm -webkit-clip-path giúp tương thích với các phiên bản Safari và Chrome cũ hơn. Bạn có thể bật/tắt nó trong tùy chọn đầu ra.
Tôi có thể xuất sang Tailwind CSS không?
Có. Chuyển định dạng đầu ra sang Tailwind và công cụ sẽ tạo ra một giá trị tùy ý như [clip-path:polygon(...)] mà bạn có thể dán trực tiếp vào thuộc tính class.
Vì sao hình của tôi trông khác trên phần tử không vuông?
Phần trăm của clip-path được tính tương đối với khung bao của phần tử. Hãy dùng thanh trượt chiều rộng và chiều cao trong khung xem trước để kiểm tra hình dạng của bạn ở các tỉ lệ khác nhau.
Công cụ này có miễn phí và riêng tư không?
Có. Trình tạo hoàn toàn miễn phí, không cần đăng ký, và chạy hoàn toàn trong trình duyệt của bạn, nên ảnh xem trước bạn tải lên không bao giờ rời khỏi thiết bị.
Dù bạn đang tạo mặt nạ cho ảnh, khắc một đường ngăn cách nghiêng, hay làm hoạt hình hiệu ứng reveal, Trình Tạo CSS Clip-Path giúp bạn thiết kế hình dạng một cách trực quan và xuất code sạch ngay lập tức. Kéo vài điểm, chọn CSS hoặc Tailwind, và biến những bố cục phi chữ nhật thành hiện thực mà không cần phỏng đoán.