Trình tạo CSS Clip-Path

CSS clip-path chấp nhận hàm polygon() gồm số lượng bất kỳ cặp tọa độ x/y, nghĩa là nó có thể khoét một hộp thành những 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 thường dùng. Vấn đề là gõ các tọa độ đó bằng tay rất tẻ nhạt và gần như không thể làm đúng đối với 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 trên bản xem trước trực tiếp, để hình dạng bạn thấy luôn là hình dạng CSS tạo ra.

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

Sáu hình khởi tạo sẵn đi kèm được chọn để chứng minh clip-path có thể làm được nhiều hơn là hình 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, bong bóng thoại khoét một cái đuôi tam giác khỏi hình chữ nhật phẳng thông thường, và cuống vé tạo hai rãnh lõm vào các cạnh đối diện giống hệt một tấm vé đục lỗ thực tế. Tải bất kỳ hình khởi tạo sẵn nào và tiếp tục kéo từ đó – không có gì trong trình soạn thảo khóa bạn vào hình dạng bắt đầu.

Tải ảnh của bạn lên để xem trước clip-path trên nội dung thực tế thay vì một cái hộp trơn, hoặc bỏ qua hoàn toàn việc tải lên và bản xem trước sẽ chuyển sang mẫu kẻ sọc để hình dạng cắt ra vẫn hiển thị rõ ràng trong mọi trường hợp. Giống như mọi công cụ trên trang này, toàn bộ hoạt động cục bộ trong trình duyệt: không ả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 đã tải xong.