Trình tạo CSS clip-path

Trình tạo CSS clip-path là gì?

Trình tạo CSS clip-path là một trình chỉnh sửa trực quan miễn phí cho thuộc tính CSS clip-path, dành cho các nhà phát triển front-end và nhà thiết kế muốn cắt các phần tử thành hình không chữ nhật. Chọn một thiết lập sẵn từ menu thả xuống — circle() và ellipse() với bán kính và tâm điểm, polygon() với bao nhiêu đỉnh tùy ý, inset() với bốn độ lệch cạnh, hoặc biến thể inset() bo góc với bán kính góc. Mỗi tham số là một phần trăm nhập qua ô nhập số, và một hộp xem trước có nền bàn cờ hiển thị hình kết quả theo thời gian thực. CSS clip-path đầy đủ được tạo để bạn sao chép. Hãy dùng nó để che ảnh, cắt các đường phân chia phần theo đường chéo, tạo avatar lục giác, hoặc khắc các hình bong bóng thoại mà không cần đếm tọa độ bằng tay.

Cách sử dụng Trình tạo CSS clip-path

1. Chọn một hình từ menu thả xuống thiết lập sẵn: hình tròn, elip, đa giác, inset hoặc bo góc.
2. Với hình tròn hoặc elip, đặt bán kính (hoặc bán kính X/Y) và vị trí tâm X/Y theo phần trăm.
3. Với đa giác, chỉnh X và Y của từng đỉnh theo phần trăm; nhấp Thêm điểm để thêm đỉnh và sắp xếp lại bằng cách chỉnh các giá trị.
4. Với inset hoặc bo góc, đặt các độ lệch trên, phải, dưới và trái; bo góc còn nhận thêm một bán kính góc.
5. Quan sát bản xem trước trực tiếp cắt hộp khi bạn gõ.
6. Sao chép CSS clip-path đã tạo và dán vào biểu định kiểu của bạn.

Ví dụ

Thiết lập sẵn hình tròn, bán kính 50%, tâm 50% 50%

clip-path: circle(50% at 50% 50%);

Thiết lập sẵn đa giác, các điểm (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Thiết lập sẵn bo góc, inset 10% tất cả các cạnh, bán kính góc 20%

clip-path: inset(10% 10% 10% 10% round 20%);

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

clip-path dùng để làm gì?

Thuộc tính CSS clip-path cắt một phần tử thành một hình cơ bản, nên chỉ vùng bên trong hình giữ được hiển thị. Nó rất hợp cho avatar hình tròn, các vết cắt phần theo đường chéo, lưới lục giác, mặt nạ ảnh và bong bóng thoại — tất cả mà không cần ảnh hay tệp SVG bổ sung.

Thiết lập sẵn đa giác hoạt động thế nào?

polygon() vẽ một hình bằng cách nối lần lượt một danh sách các đỉnh X/Y. Chỉnh giá trị phần trăm của từng điểm và dùng Thêm điểm để chèn thêm đỉnh; điểm cuối tự động nối lại với điểm đầu. Tối thiểu ba điểm được giữ để hình vẫn hợp lệ.

Vì sao các giá trị là phần trăm?

Phần trăm giúp vùng cắt co giãn theo phần tử, nên cùng một clip-path hoạt động ở mọi kích thước. 0% là cạnh trái hoặc trên và 100% là cạnh phải hoặc dưới của hộp phần tử.

Thiết lập sẵn bo góc thêm gì?

Thiết lập sẵn bo góc dùng inset() với bán kính góc round, tạo ra một hình chữ nhật được cắt vào trong ở mỗi cạnh và có các góc bo tròn — tiện cho các vết cắt có khung mềm mại mà border-radius thông thường không thể kết hợp với một vùng cắt inset.

Dữ liệu của tôi có được gửi đi đâu không?

Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — các giá trị hình của bạn không bao giờ rời khỏi thiết bị, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang được tải.