CSS Clip Path Generator
24 hình cắt, tham số và điểm đa giác có thể sửa; xuất CSS hoặc một khai báo.
Xử lý cục bộ
So sánh bốn hình polygon, rồi khớp các thiết lập trong không gian làm việc. Mỗi bản xem trước dùng cùng polygon trong CSS; hộp xuất ban đầu là 240 × 180 px.
Điều chỉnh các thiết lập này trong không gian làm việcDùng hình lục giác cho avatar nhóm hoặc huy hiệu lặp lại.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Thử hình thoi nghiêng cho một hình ảnh nhỏ hoặc điểm nhấn trang trí.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Dùng hình bốn cạnh nghiêng cho điểm nhấn thẻ.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Hướng cạnh banner về phía phần tiếp theo.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Bắt đầu với CSS từ bất kỳ hình nào ở trên, rồi thêm các quy tắc này sau nó. Thay đường dẫn hình ảnh và văn bản alt bằng của riêng bạn. Hộp giữ tỷ lệ 4:3; object-fit: cover cắt hình ảnh để lấp đầy mà không kéo giãn. Tọa độ phần trăm đi theo hộp khi nó đổi kích thước.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Mô tả hình ảnh của bạn"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Thư viện này hiển thị 4 ví dụ đa giác cơ bản. Không gian làm việc có 24 hình; đa giác hỗ trợ thêm, xóa và di chuyển đỉnh, còn hình tròn, elip và inset dùng tham số. Không bao gồm nhập đường dẫn SVG hoặc chỉnh sửa đường cong tùy chỉnh. Dùng Copy CSS hoặc Download .css trong không gian làm việc để lưu quy tắc. Bản xem trước ảnh PNG/JPEG/WebP cục bộ chỉ ở trong thẻ này, không được tải lên hay lưu lại. Tỷ lệ chỉ đổi phần cắt của bản xem trước; ảnh và tỷ lệ này không có trong tệp CSS/HTML xuất ra.
Lộ trình tác vụ / từ đầu vào đến kết quả
Chọn trong 24 hình. Hình đa giác hỗ trợ thêm, xóa và di chuyển đỉnh; hình tròn, elip và inset dùng tham số. Xuất khai báo clip-path hoặc CSS ví dụ đầy đủ.
Kéo đỉnh có số hoặc nhập tọa độ. Phím mũi tên di chuyển đỉnh đang chọn 1%; Shift + mũi tên di chuyển 10%. Thêm sẽ chèn trung điểm sau đỉnh đã chọn.
Ví dụ đầy đủ gồm màu đã chọn, chiều rộng 240px và tỷ lệ 4:3. Trình chỉnh sửa co giãn theo màn hình.
Chọn ảnh PNG, JPEG hoặc WebP cục bộ tối đa 8 MiB, 16 megapixel và mỗi cạnh 8192 pixel. Có thể xem trước với cả 24 hình. Ảnh lấp đầy khung bằng cách cắt cover; 4:3, 1:1, 16:9 và 3:4 chỉ thay đổi bản xem trước này. Ảnh không được tải lên, lưu lại hoặc đưa vào tệp CSS/HTML xuất ra. CSS ví dụ đầy đủ vẫn giữ tỷ lệ 4:3. Sao chép hoặc tải CSS xuống trước khi rời đi.
Đầu ra CSS: Chỉ khai báo clip-path / CSS ví dụ đầy đủ.
Tọa độ phần trăm co giãn theo phần tử. Dán khai báo vào quy tắc có sẵn hoặc dùng lớp .clipped-shape. Kiểm tra trên máy tính và điện thoại. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.
Trình tạo clip path CSS dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.
Chạy bên trong tab trình duyệt hiện tại.
Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.
Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.
Xóa tab và dữ liệu đang làm việc sẽ biến mất.
Trong phép thử trình duyệt cục bộ 2026-09-24, bắt đầu từ Lục giác mặc định (ngang 24%, dọc 50%). Chọn điểm 1, đổi X từ 24% thành 30%, đặt màu #ff6600. Bản xem trước là đa giác cam sáu đỉnh với clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); năm điểm còn lại giữ nguyên thứ tự.
CSS ví dụ đầy đủ dùng .clipped-shape rộng 240px, tỷ lệ 4 / 3, nền #ff6600, cả -webkit-clip-path lẫn clip-path. Bản sao CSS trùng tệp tải toolars-clip-path.css (240 byte). Ở chế độ chỉ khai báo, nội dung sao chép chính xác là clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 byte UTF-8). Kiểm tra vùng cắt trong bố cục của bạn.
Đặt X của điểm 1 thành 101%. Trong thử nghiệm 2026-09-24, ứng dụng báo tọa độ phải hữu hạn và nằm trong 0–100%; bản xem trước và CSS biến mất, sao chép và tải xuống bị khóa. Đổi X về 30% khôi phục polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Cạnh giao nhau không tự được sửa.
Chọn trong 24 hình.
Câu hỏi thường gặp