Trình tạo đường dẫn clip CSS

Đường dẫn clip CSS chấp nhận hàm đa giác () được tạo từ bất kỳ cặp tọa độ x/y nào, có nghĩa là nó có thể khắc một hộp thành các hình dạng vượt xa các hình chữ nhật và hình tròn đơn giản mà hầu hết mọi người đều hướng tới. Điều đáng chú ý là việc nhập các tọa độ đó bằng tay rất tẻ nhạt và gần như không thể đúng cho bất kỳ thứ gì ngoài một hình tam giác cơ bản — trình tạo này biến danh sách tọa độ đó thành một tập hợp các điểm có thể kéo được trên bản xem trước trực tiếp, vì vậy hình dạng bạn nhìn thấy luôn là hình dạng mà CSS tạo ra.

Mỗi điểm trên bản xem trước được lưu trữ dưới dạng phần trăm chiều rộng và chiều cao của hộp, đó chính xác là cách clip-path: Polygon() hoạt động dưới mui xe: hình dạng được xây dựng theo cách này giữ tỷ lệ chính xác cho dù phần tử kết thúc ở kích thước nào trong một trang thực, từ mặt nạ biểu tượng nhỏ đến biểu ngữ anh hùng có chiều rộng đầy đủ. Kéo bất kỳ điểm nào để định hình lại đường viền, nhấp vào gần một cạnh để thêm điểm mới chính xác vào nơi bạn đã nhấp hoặc nhấp đúp vào một điểm hiện có để xóa điểm đó — trình chỉnh sửa luôn giữ ít nhất ba điểm vì một đa giác không thể tồn tại với ít hơn.

Sáu cài đặt trước đi kèm được chọn để chứng minh đường dẫn clip có thể làm được nhiều việc hơn là hình dạng lồi: ngôi sao và mũi tên đều dựa vào các góc phản xạ hướng vào trong, ô hội thoại tạo ra một cái đuôi hình tam giác từ một hình chữ nhật đơn giản và cuống vé có hai khía ở các cạnh đối diện giống như vẻ ngoài của một tấm vé đục lỗ thực sự. Tải bất kỳ cài đặt trước nào và tiếp tục kéo từ đó - không có gì về trình chỉnh sửa khóa bạn vào hình dạng bắt đầu.

Tải hình ảnh của riêng bạn lên để xem trước đường dẫn clip dựa trên nội dung thực thay vì hộp đơn giản hoặc bỏ qua hoàn toàn quá trình tải lên và bản xem trước sẽ quay lại dạng sọc để hình dạng cắt vẫn hiển thị rõ ràng theo cả hai cách. Giống như mọi công cụ trên trang web này, toàn bộ công cụ chạy cục bộ trong trình duyệt: không có hình ảnh nào rời khỏi thiết bị của bạn và trình tạo tiếp tục hoạt động ngoại tuyến sau khi trang được tải.