TopDev
✂️
🎨 CSS & Design MỚI

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ụ Browser-only
Hình mẫu
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.
  
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:
  
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
  
Mẹo dùng
  
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ợ.
 
 
 
  
 
 
  Phù hợp với ai 
 
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
 
 
 
  Câu hỏi thường gặp 
 
 
   CSS sinh ra có dùng được với Tailwind không?  
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
 
   Có hỗ trợ trình duyệt cũ không?  
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
 
 
 
 
   
  
Công cụ liên quan
Xem tất cả công cụ →
MỚI
🎨
Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚI
🎏
Tailwind ↔ CSS Converter
Convert giữa Tailwind utility classes và CSS thuần. ~200 utility (spacing, color, flex, grid…). Hỗ trợ migrate dự án.
MỚI
🧬
SVG → React/JSX
Convert SVG sang React component. camelCase attribute, currentColor, TypeScript types, size/color props.
MỚI
✨
CSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.