✂️

CSS Clip-path Generator Online — 12 Hình Mẫu, Copy CSS

12 hình mẫu CSS clip-path (tam giác, ngôi sao, lục giác, speech bubble) cộng chỉnh polygon points trực tiếp. Live preview, copy CSS dán vào dự án, hỗ trợ cả circle/ellipse/inset.

Tất cả công cụ

Hình mẫu

Polygon points (% / điểm)

Mỗi điểm 1 dòng: x% y%

Xem trước

CSS

CSS clip-path cắt element theo hình bất kỳ. Dùng cho hero hình thang, badge ngôi sao, speech bubble. GPU-rendered, animate được.

clip-path để làm gì?

Property clip-path cắt element thành hình bất kỳ — KHÔNG cần SVG, KHÔNG cần ảnh PNG. GPU-rendered, animate được.

Hero hình thang: header trang chủ cắt chéo dưới — không phải nền PNG.
Badge ngôi sao: nhãn "MỚI" hình sao gắn lên thẻ sản phẩm.
Speech bubble: bong bóng chat không cần SVG.
Avatar lục giác: profile picture hình hex thay vì tròn.
Section bo cong: chuyển section bằng đường cong thay vì cắt ngang.

Cú pháp

/* Polygon — đa giác */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/*                  ↑ đỉnh   ↑ trái dưới  ↑ phải dưới */

/* Circle — hình tròn */
clip-path: circle(50% at 50% 50%);
/*                ↑ bán kính ↑ tâm */

/* Ellipse */
clip-path: ellipse(40% 50% at 50% 50%);

/* Inset — cắt trong, có thể bo góc */
clip-path: inset(10% 20% 10% 20% round 20px);
/*               ↑ top right bottom left */

Polygon points — đọc thế nào?

Mỗi cặp x% y% là một đỉnh:

0% 0% = trên-trái
100% 0% = trên-phải
100% 100% = dưới-phải
0% 100% = dưới-trái

Các điểm nối thành đường thẳng theo thứ tự khai báo. Có thể dùng px thay %, nhưng % responsive hơn.

Browser support

Polygon, circle, ellipse, inset: hỗ trợ tất cả browser hiện đại từ 2017+.
path() (SVG path): Chrome 88+, Firefox 97+. Cần fallback cho Safari cũ.
shape() (cú pháp mới CSS Shapes 2): mới có Chrome 130+, Firefox đang flag. Chưa nên dùng production.

Mẹo dùng

Animate được: transition: clip-path 0.3s ease; — hover thay đổi shape mượt.
Background hoặc gradient: clip-path cắt cả background — kết hợp linear-gradient tạo CTA bắt mắt.
Chú ý overflow: phần bị cắt vẫn chiếm space layout — không thu nhỏ box.
Tránh cắt chữ: text bị cắt khó đọc; chỉ cắt background/ảnh.

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

clip-path khác mask khác nhau ở đâu?

clip-path cắt theo hình dạng vector (đa giác, đường tròn) — pixel hoặc trong, hoặc ngoài. mask dùng ảnh greyscale làm "lớp che", cho phép gradient mờ dần. clip-path nhẹ hơn (GPU-accelerated tốt), mask linh hoạt hơn nhưng tốn tài nguyên.

clip-path có chạy trên mobile Safari không?

Có. Tất cả browser hiện đại (Safari 11.1+, Chrome 55+, Firefox 54+, Edge 79+) đều hỗ trợ polygon, circle, ellipse, inset. Path() có giới hạn ở Safari cũ (16+ mới hỗ trợ đầy đủ). Hơn 97% người dùng toàn cầu xem được.

Có animate clip-path mượt không?

Có nhưng cần lưu ý: chỉ mượt khi 2 keyframe có CÙNG SỐ ĐIỂM polygon. Ví dụ animate từ tam giác (3 điểm) sang vuông (4 điểm) sẽ giật. Trick: thêm điểm thừa cho tam giác để có 4 điểm trùng nhau. Circle thì không có vấn đề này.

Tại sao polygon dùng % thay vì px?

% responsive theo kích thước element — element to nhỏ vẫn giữ tỷ lệ. Px chỉ phù hợp khi element có size cố định. Best practice: % cho hero/section bo cong, px cho icon/badge nhỏ kích thước cố định.

shape() vs path() có gì khác?

path() dùng cú pháp SVG path (M, L, C, Z) — phức tạp nhưng cực mạnh. shape() (CSS Shapes 2, mới Chrome 130+) dùng cú pháp gần với polygon nhưng cho phép curve. Hiện 2026 shape() chưa đủ browser support cho production — tool này không hỗ trợ.