Trình tạo đường cắt CSS Clip-Path

Tạo trực quan mã đường cắt CSS clip-path, hỗ trợ các hình dạng như đa giác, hình tròn, hình elip, và có thể xử lý ảnh hàng loạt

Báo lỗi

Chế độ chạy trên trình duyệt: Dữ liệu của bạn được xử lý trong trình duyệt và không được tải lên máy chủ.

Tốc độ và ổn định: Tốc độ xử lý phụ thuộc vào thiết bị và trình duyệt. Với tác vụ hàng loạt lớn, phiên bản desktop có thể ổn định hơn.

Đang tải công cụ, vui lòng chờ...

Nếu công cụ trực tuyến không tải hoặc chạy được, hãy thử công cụ máy tính. https://tools.yikeaigc.com/

Mức sử dụng công cụ

Quay lại phiên bản cũ

Đặt đường cắt trước, rồi sao chép mã hoặc xử lý ảnh hàng loạt

Sau khi chọn hình có sẵn, có thể kéo các điểm điều khiển đa giác, hoặc chuyển sang hình tròn, elip, chữ nhật inset và chỉnh tham số. Xử lý hàng loạt sẽ dùng đường dẫn hiện tại; khi tải nhiều ảnh lên chỉ hiển thị 20 ảnh đầu, nhưng sẽ xử lý tất cả.

Thông tin đường dẫn hiện tại

Loạipolygon

Điểm điều khiển3

Mẹo: đặt xong đường dẫn trước, rồi sao chép mã hoặc xử lý ảnh.

Xem trước trực tiếp Ở chế độ đa giác, có thể kéo điểm điều khiển màu xanh; tọa độ sẽ đồng bộ tạo CSS.

Tọa độ: tương đối với phần tử, góc trên trái là 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Hình dạng và mẫu Chọn loại trước, rồi chỉnh tham số

Loại hình dạng

Danh mục đặt sẵn

Tham số đường dẫn Giá trị hỗ trợ phần trăm

Văn bản tọa độ

Bán kính

Tâm X

Tâm Y

Bán kính ngang

Bán kính dọc

Tâm X

Tâm Y

上

Phải

dưới

Tả

Bo góc

Xem trước & xuất Nền chỉ ảnh hưởng xem trước và xuất ảnh

Rộng xem trước (px)

Cao xem trước (px)

Màu A

Màu B

Góc gradient

Xem trước ảnh

Hiện viền phần tử Bao gồm tiền tố -webkit Tạo bộ chọn lớp

Tạo mã

Mã cập nhật theo cài đặt theo thời gian thực.

Áp dụng hàng loạt đường dẫn hiện tại Vui lòng thiết lập đường dẫn ở bước trước, rồi chọn xử lý ảnh.

Nhấp hoặc kéo thả ảnh Hỗ trợ các định dạng phổ biến như JPG, PNG, WebP, GIF, BMP

Chưa chọn ảnh.

Cài đặt đầu ra PNG hỗ trợ nền trong suốt

Định dạng đầu ra

Chế độ kích thước

Giới hạn cạnh dài (px)

Chiều rộng tùy chỉnh(px)

Chiều cao tùy chỉnh(px)

Chất lượng xuất92%

Làm trong suốt vùng ngoài cắt Dùng đường dẫn hiện tại

Đang chờ xử lý.

Xem trước ảnh và kết quả Sau khi tải lên hiển thị 20 ảnh đầu, khi xử lý sẽ gồm tất cả tệp.

Ảnh chờ xử lý0 ảnh

Vui lòng chọn ảnh để xem hình thu nhỏ.

Kết quả xử lý0 ảnh

Hiển thị hình thu nhỏ kết quả sau khi xử lý xong.

Hướng dẫn

Hướng dẫn sử dụng phần mềm

Thiết kế đường cắt:Sau khi vào công cụ, trước tiên hãy chọn loại hình dạng ở bước “Thiết kế đường dẫn”; có thể dùng đa giác, hình tròn, hình elip hoặc hình chữ nhật inset.
Chọn hình dạng có sẵn:Có thể chọn mẫu có sẵn từ hình cơ bản, mũi tên và biểu tượng, hình trang trí, rồi điều chỉnh tham số theo nhu cầu.
Chỉnh sửa tham số đường dẫn:Với đa giác, có thể kéo thả các điểm điều khiển hoặc nhập tọa độ phần trăm trong ô tọa độ; với hình tròn, hình elip và hình chữ nhật inset, có thể nhập trực tiếp bán kính, tâm, lề và bo góc.
Thiết lập hiệu ứng xem trước:Có thể điều chỉnh chiều rộng, chiều cao xem trước, màu chuyển sắc, góc chuyển sắc, hoặc chọn hình ảnh làm nội dung xem trước.
Sao chép mã CSS:Sau khi xác nhận hiệu ứng, nhấp “Sao chép clip-path” hoặc “Sao chép CSS”; có thể chọn có bao gồm tiền tố -webkit và bộ chọn lớp hay không.
Xử lý ảnh hàng loạt:Nhấp “Bước tiếp theo: Xử lý hàng loạt”, chọn nhiều ảnh, thiết lập định dạng đầu ra, chất lượng và chế độ kích thước rồi bắt đầu xử lý.
Tải kết quả:Sau khi xử lý xong, nhấp “Tải xuống tất cả kết quả ZIP”; tệp đầu ra sẽ cố gắng giữ nguyên tên tệp gốc, nếu trùng tên sẽ tự động thêm số để phân biệt.

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

Đáp: clip-path dùng để cắt phần tử thành hình dạng chỉ định, thường dùng cho hiển thị ảnh hình dạng đặc biệt, thiết kế mép thẻ, tạo hình nút, hình trang trí trang web và hiệu ứng tương tác.

Đáp: polygon tạo đa giác bằng nhiều điểm tọa độ; circle tạo vùng cắt hình tròn; ellipse tạo vùng cắt hình elip; inset tạo hình chữ nhật inset và hỗ trợ tham số bo góc.

Đáp: Tọa độ được biểu thị bằng phần trăm, ví dụ 50% 0% đại diện cho vị trí giữa cạnh trên của phần tử, 100% 100% đại diện cho góc dưới bên phải. Các điểm được phân tách bằng dấu phẩy và cần ít nhất 3 điểm.

Đáp: -webkit-clip-path dùng để tương thích với một số môi trường nhân WebKit. Để tăng phạm vi tương thích, có thể giữ đồng thời cả cách viết có tiền tố và cách viết chuẩn.

Đáp: Có thể chọn các định dạng ảnh phổ biến làm đầu vào, đầu ra hỗ trợ PNG, JPEG và WebP. PNG phù hợp để giữ lại vùng trong suốt, JPEG phù hợp để tạo tệp nhỏ hơn, WebP phù hợp để cân bằng giữa dung lượng và chất lượng hình ảnh.

Đáp: Công cụ sẽ cố gắng giữ nguyên tên tệp gốc và thay phần mở rộng theo định dạng đầu ra. Nếu có tệp trùng tên, một số sẽ được thêm vào sau tên tệp để tránh các kết quả ghi đè lên nhau.