Trình Tạo CSS clip-path
Cắt xén hình ảnh và phần tử web cực mượt bằng thao tác kéo thả. Hỗ trợ tạo hình đa giác, hình tròn, hình elip và xuất thẳng ra mã CSS để bạn xài luôn.
Trình Chỉnh Sửa
Click vào khoảng trống để thêm điểm neo. Kéo để di chuyển. Chuột phải để xóa điểm.
Cài đặt hiển thị
Hiệu ứng Hover (Tùy chọn)
Nếu bật, công cụ sẽ sinh ra mã CSS kèm thuộc tính transition khi di chuột. Lưu ý: Ở chế độ Đa giác, số lượng điểm neo của 2 trạng thái phải bằng nhau để hiệu ứng mượt mà.
Bạn đang chỉnh sửa hình dáng ở trạng thái mặc định. Hãy chuyển sang thẻ Hover để thiết lập hình dáng khi rê chuột.
Mã CSS Đầu Ra
Bạn cũng có thể thích
Về Trình Tạo CSS clip-path
Công cụ này là một trợ thủ đắc lực giúp bạn tùy biến thuộc tính clip-path trong CSS cực kỳ dễ dàng chỉ bằng vài thao tác kéo thả.
Hồi xưa, mỗi lần muốn cắt xén ảnh theo hình thù kỳ lạ thì toàn phải hì hục nhẩm tính tọa độ. Giờ thì khỏe re, vẽ thẳng trên màn hình rồi hốt luôn đoạn CSS có sẵn về ném vào code là xong.
Bao trọn các hệ hình học cơ bản và hỗ trợ sinh luôn cả hiệu ứng hover mượt mà.
Cách Dùng Nhanh Chóng
1️⃣ Chọn Hình Dáng
Mở đầu bằng việc lự chọn một kiểu hình dáng trên thanh công cụ hoặc pick luôn một preset có sẵn.
2️⃣ Cân Chỉnh Điểm Neo
Với đa giác, nhấp vào khoảng trống để đẻ thêm điểm, đè chuột kéo lê, và nhấp phải để tiễn nó đi.
3️⃣ Lấy Code Về
Thấy vừa mắt rồi thì nhấn chữ 'Copy' chà bá để ném mã CSS (hoặc Tailwind) vào project của bạn.
Tài Liệu Thuộc Tính
Điểm mặt các hàm thông dụng của clip-path:
■ polygon() — Đa Giác
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Cho phép ném vô số lượng điểm tọa độ tùy thích. Nhớ là cần bèo nhất 3 điểm mới thành hình nhé.
■ circle() — Hình Tròn
clip-path: circle(Bán_kính at Tâm_X Tâm_Y)
Khoét một lỗ tròn xoe với thông số bán kính và tâm điểm chỉ định.
■ ellipse() — Hình Elip
clip-path: ellipse(Bán_kính_X Bán_kính_Y at Tâm_X Tâm_Y)
Na ná hình tròn nhưng bạn có thể kéo dãn độ dài độ rộng tùy thích.
■ inset() — Thụt Lề
clip-path: inset(trên phải dưới trái round độ_bo_góc)
Giống y chang cách set padding, cắt thụt từ viền vào trong. Hỗ trợ bo góc bằng chữ 'round'.
FAQ - Hỏi Đáp Nhanh
- Q.Thuộc tính clip-path có ảnh hưởng đến SEO không?
- Không. Thuộc tính này chỉ thay đổi cách hiển thị trên màn hình, còn cấu trúc HTML và chữ viết bên trong vẫn giữ nguyên. Bot tìm kiếm vẫn đọc hiểu nội dung bị cắt bình thường.
- Q.CSS clip-path và SVG clipPath khác nhau chỗ nào?
- CSS clip-path xài thẳng các hàm CSS có sẵn. Còn SVG clipPath thì cần phải định nghĩa một thẻ SVG rồi lấy CSS trỏ vào đó. CSS thì dễ dùng, thao tác nhanh, còn SVG thì gánh được những hình dáng cực kỳ phức tạp.
- Q.Tôi có thể làm hiệu ứng chuyển động cho clip-path khi rê chuột được không?
- Được luôn. Chỉ cần dùng thuộc tính transition là mượt mà. Tuy nhiên, nếu xài đa giác (polygon), số lượng điểm neo trước và sau khi hover phải hoàn toàn bằng nhau thì hiệu ứng chuyển mới chạy được.
- Q.Cái phần bị cắt đi rồi thì click chuột vào có ăn không?
- Không. Mọi thao tác chuột (click, hover) ở phần diện tích đã bị cắt xén đều bị vô hiệu hóa. Điều này giúp tránh việc click nhầm vào vùng trong suốt, mang lại trải nghiệm chuẩn xác hơn.
- Q.Tải ảnh lên công cụ này có sợ bị lộ dữ liệu không?
- Bạn hoàn toàn yên tâm. Mọi thao tác cắt ghép, hiển thị, tải ảnh đều chạy 100% cục bộ trên trình duyệt của máy bạn. Không có bất kỳ dữ liệu nào bị gửi đi.
Ứng Dụng Thực Tiễn
Cắt xéo Hero Section
Tạo điểm nhấn mạnh mẽ ngay khi người dùng vừa vào trang web bằng cách cắt đường chéo ảnh nền phần đầu (header).
Ảnh đại diện phá cách
Thay vì bo tròn 100% nhàm chán, hãy cắt ảnh avatar của thành viên thành hình lục giác, hình sao hay bất cứ hình khối gì bạn thích.
Hiệu ứng mở rộng (Reveal)
Khởi đầu bằng một hình cắt nhỏ xíu, khi rê chuột vào thì ảnh bung to ra toàn màn hình để gây bất ngờ cho người xem.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.