Tiện ích Thiết kế · Cục bộ
CSS Clip Path Generator
Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.
Lộ trình tác vụ / từ đầu vào đến kết quả
Chọn hình ban đầu
Chạy cục bộ · Không có gì được tải lên
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;
}Có bốn mẫu và hai thanh trượt. Không hỗ trợ chỉnh sửa đỉnh tự do, nhập đường dẫn SVG và đường cong. Để sao chép hoặc tải xuống một quy tắc tùy chỉnh, dùng Copy CSS hoặc Download .css trong không gian làm việc.
Lộ trình tác vụ / từ đầu vào đến kết quả
Chọn lục giác, hình thoi, hình bình hành hoặc chữ V. Hai thanh trượt chỉnh mẫu; chỉnh riêng một đỉnh sẽ chuyển sang đa giác tùy chỉnh.
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.
Kiểm tra các cạnh trước khi xuất. Tay nắm có số chỉ dùng để chỉnh sửa, không nằm trong CSS.
Đầu ra CSS: Chỉ khai báo clip-path / CSS ví dụ đầy đủ. 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.
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.
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.
Bắt đầu từ bốn mẫu, thêm, xóa hoặc di chuyển đỉnh. Xuất khai báo clip-path hoặc 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.
Câu hỏi thường gặp