Chuyển đến nội dung chính
忆云竹

Tạo clip-path đa giác CSS

Kéo các đỉnh hoặc nhập tọa độ để dựng vùng cắt đa giác, xem trực tiếp và xuất CSS tương ứng.

Kéo điểm hoặc dùng phím mũi tên. Giữ Shift để tăng bước di chuyển. Bạn cũng có thể nhập trực tiếp tọa độ.

CSS

Hình ban đầu
Xử lý ngay trong trình duyệt. Không tải lên hay lưu dữ liệu.

Giới thiệu công cụ

Thiết kế bảng chéo hoặc huy hiệu hình học mà không cần tạo mặt nạ ảnh.

Cách sử dụng

Bắt đầu từ tam giác, hình thoi, lục giác hoặc mẫu khác. Kéo các điểm, chỉnh phần trăm X/Y, thêm hoặc xóa đỉnh theo ý muốn. Dùng Tab để chọn điểm rồi nhấn phím mũi tên để tinh chỉnh; giữ Shift để dịch chuyển bước lớn hơn.

Đa giác có 3–32 điểm với tọa độ 0–100%. Các điểm nối theo thứ tự danh sách rồi khép kín. Sao chép hoặc tải clip-path: polygon(...) giống phần xem trước. Công cụ không tạo đường cong hoặc tệp ảnh đã cắt.

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

Có hỗ trợ đường cong hoặc điểm ngoài hộp không?

Hỗ trợ 3–32 đỉnh với tọa độ 0%–100%. Không hỗ trợ đường cong và đỉnh vượt các giới hạn này.

Vì sao đa giác xuất hiện vết cắt lạ sau khi kéo các điểm?

Các điểm được nối theo thứ tự trong danh sách, rồi điểm cuối nối lại điểm đầu. Kéo một điểm qua cạnh khác có thể làm đường bao tự cắt nhau. Hãy bắt đầu từ mẫu và giữ thứ tự các đỉnh theo chu vi. Có thể xóa điểm thừa nhưng phải giữ ít nhất ba điểm.

Bình luận

0
để tham gia thảo luận.
Chưa có bình luận.
Chuỗi trả lời

Theo dõi toàn bộ cuộc trò chuyện theo thời gian; mỗi câu trả lời cho biết chính xác tin nhắn được phản hồi.