Giới thiệu CSS Clip Path Generator
CSS Clip-path là gì? Sức mạnh cắt gọt Layout
Theo mặc định, mọi phần tử trên trình duyệt web (div, img) đều là một hình hộp chữ nhật (Box Model). Thuộc tính clip-path phá vỡ giới hạn này, cho phép lập trình viên "cắt" phần tử thành bất kỳ hình khối đa giác phức tạp nào (Tam giác, Lục giác, Ngôi sao, Đường chéo, Zig-zag).
Khi sử dụng clip-path, những phần nằm ngoài vùng cắt sẽ bị vô hình hoàn toàn, giúp tạo ra các thiết kế phá cách (Creative Layout) không theo lối mòn khối vuông truyền thống.
Các giá trị phổ biến của Clip-path
- circle(): Cắt thành hình tròn dựa trên tọa độ tâm và bán kính.
- ellipse(): Cắt thành hình bầu dục.
- polygon(): Cắt đa giác tự do bằng cách truyền vào tập hợp các điểm tọa độ (X Y). Ví dụ:
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);sẽ tạo ra hình tam giác. - path(): Cắt theo đường dẫn đồ họa Vector (SVG path), cho phép tạo ra mọi hình dáng uốn lượn phức tạp nhất.
Công cụ trực quan giúp vẽ đa giác Polygon
Việc xác định từng tọa độ % của một hình lục giác hay ngôi sao trong đầu là rất khó. CSS Clip-path Maker cung cấp cho bạn một lưới lưới tọa độ (Grid) trực quan:
- Chọn một Hình khối có sẵn (Tam giác, Ngôi sao, Mũi tên, Hình bình hành).
- Dùng chuột kéo thả các điểm neo (Nodes) trên hình để biến dạng tùy ý.
- Ngay lập tức, đoạn mã
clip-path: polygon(...)sẽ được cập nhật. Bạn chỉ việc Copy và dán vào class CSS của mình.