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

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