Nhà phát triển / Hình dạng CSS
Trình tạo Clip Path CSS: Đa giác, hình tròn, elip và inset
Tạo vùng cắt CSS với sáu mẫu đa giác, các điểm có thể kéo và điều chỉnh bằng bàn phím, cùng các tùy chọn hình tròn, elip và inset. Xem trước nền chuyển màu hoặc hình ảnh cục bộ, rồi sao chép CSS theo phần trăm hoặc pixel.
Trình tạo Clip Path CSS: Đa giác, hình tròn, elip và inset: Cắt phần xem trước theo hình dạng đã chọn mà không thay đổi tệp hình ảnh gốc. Đầu ra theo phần trăm tuân theo kích thước của phần tử. Đầu ra theo pixel sử dụng chiều rộng và chiều cao tham chiếu; phần xem trước được thu phóng để vừa với màn hình của bạn. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
Kéo một điểm được đánh số, dùng các phím mũi tên của điểm đó hoặc nhập tọa độ. Các tọa độ bên dưới là phần trăm; kết quả pixel sử dụng kích thước tham chiếu.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Hình dạng theo phần trăm thay đổi kích thước cùng phần tử. Phần trăm của hình tròn sử dụng đường chéo đã chuẩn hóa; phần trăm của hình elip sử dụng chiều rộng và chiều cao. Tọa độ pixel cố định theo kích thước tham chiếu.
Cắt xén CSS
clip-path của MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Cắt xén thay đổi vùng hiển thị mà không thay đổi hộp bố cục của phần tử.
Tọa độ hình cơ bản
W3C CSS Shapes Level 1, các hình cơ bản: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Tọa độ đa giác và bán kính elip được tính theo hộp tham chiếu; phần trăm của hình tròn sử dụng đường chéo đã chuẩn hóa của hộp. Tọa độ đặt sẵn và dải chuyển màu là tác phẩm nguyên bản.
Cách sử dụng
- Chọn một hình dạng và mẫu, sau đó đặt kích thước tham chiếu.
- Kéo các điểm đa giác, dùng phím mũi tên hoặc chỉnh sửa tọa độ; điều chỉnh các tùy chọn cho những hình dạng khác.
- Chọn đầu ra theo phần trăm hoặc pixel, rồi sao chép CSS.
Quyền riêng tư và giới hạn
Hình ảnh xem trước tùy chọn được giữ trên thiết bị của bạn. Không có gì được tải lên.
Công cụ liên quan
Câu hỏi thường gặp
Làm cách nào để chỉnh sửa một điểm mà không cần kéo?
Đặt tiêu điểm vào nút điều khiển được đánh số của điểm đó rồi dùng các phím mũi tên, hoặc nhập phần trăm X và Y trong danh sách điểm. Đa giác cần ít nhất ba điểm.
Công cụ này có xuất hình ảnh đã cắt không?
Không. Công cụ xuất CSS cho một phần tử HTML. Hình ảnh cục bộ chỉ dùng để xem trước.
Phần trăm của hình tròn được đo như thế nào?
CSS sử dụng đường chéo đã chuẩn hóa, sqrt((width squared + height squared) / 2), làm tham chiếu bán kính hình tròn. Bán kính của elip sử dụng riêng chiều rộng và chiều cao.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản