Tạo Clip Path CSS
Công cụ tạo clip path CSS này giúp bạn thiết kế hình clip-path bằng trực quan thay vì gõ tay từng cặp tọa độ. Kéo các nút trên canvas tương tác, xem hình cập nhật theo thời gian thực và sao chép đoạn CSS được tạo thẳng vào file stylesheet.
Công cụ hỗ trợ cả bốn hàm tạo hình của clip-path — polygon, circle, ellipse và inset — kèm 28 mẫu dựng sẵn. Nó dành cho lập trình viên frontend cần cắt giao diện không vuông vức, nhà thiết kế web tạo hình hero section và mặt nạ ảnh, cùng bất kỳ ai muốn hiểu cách giá trị clip-path thực sự hoạt động.
Cách dùng công cụ tạo clip path
Chọn kiểu hình
Chọn một tab — Đa giác, Hình tròn, Hình bầu dục hoặc Inset — hoặc mở Mẫu có sẵn để bắt đầu từ một hình dựng sẵn như ngôi sao, mũi tên hay khiên.
Chỉnh sửa hình
Kéo các nút trên canvas để định hình lại. Với đa giác, nhấp vào cạnh để thêm điểm và nhấp đúp vào nút để xóa điểm. Với hình tròn, bầu dục và inset, kéo nút tâm và nút bán kính hoặc nút cạnh, hoặc dùng thanh trượt để nhập giá trị chính xác.
Dùng công cụ hỗ trợ trên canvas
Bật Vùng ngoài để làm mờ phần bị cắt bỏ, bật Lưới để căn chỉnh, hoặc đổi màu canvas và tải ảnh lên để xem hình trên nội dung thật.
Sao chép CSS
Giá trị clip-path được tạo hiển thị ở khung kết quả. Nhấn Sao chép CSS và dán vào file stylesheet. Đã có sẵn giá trị? Dùng Nhập để dán đoạn CSS có sẵn và tiếp tục chỉnh sửa trực quan.
Tính năng
Trình chỉnh sửa trực quan
Kéo các nút trên canvas tỉ lệ 4:3 và CSS cập nhật tức thì, với tọa độ theo phần trăm để định vị chính xác.
Bốn kiểu hình
Dựng clip path đa giác, hình tròn, bầu dục và inset — mọi hàm tạo hình mà thuộc tính CSS clip-path hỗ trợ.
Inset với góc bo tròn
Cắt vào trong từ mỗi cạnh và thêm border-radius để bo tròn các góc của hình chữ nhật inset.
28 mẫu có sẵn
Bắt đầu từ tam giác, đa giác đều, ngôi sao, mũi tên và mũi nhọn, bong bóng chat, khiên, cùng các biến thể tròn/bầu dục/inset.
Chỉnh điểm chính xác
Nhập giá trị X/Y chính xác cho từng điểm đa giác qua danh sách điểm, với độ chính xác 0.1% để kết quả sạch và dễ đọc.
Quản lý điểm thông minh
Nhấp vào cạnh để chèn điểm giữa hai đỉnh gần nhất, và nhấp đúp hoặc nhấn Delete để xóa — không bao giờ dưới mức tối thiểu 3 điểm.
Khóa inset
Bật Khóa tất cả để đổi cùng lúc cả bốn cạnh inset, cắt đồng đều từ mọi cạnh.
Lịch sử hoàn tác / làm lại
Mọi thay đổi được ghi lại trong ngăn xếp lịch sử tới 50 bước, nên bạn có thể đi lui và đi tới thoải mái.
Nhập CSS có sẵn
Dán một giá trị polygon, circle, ellipse hoặc inset và nạp vào trình chỉnh sửa để tiếp tục tinh chỉnh trực quan.
Nền tùy chỉnh
Đổi màu canvas hoặc tải ảnh lên để xem trước clip path của bạn trông thế nào trên nội dung thật.
Lớp phủ lưới & vùng ngoài
Hiện lưới phần trăm 10×10 để căn chỉnh và làm mờ vùng ngoài để thấy chính xác phần nào bị cắt.
Phím tắt
Hoàn tác và làm lại với Ctrl+Z / Ctrl+Y, nhích điểm đang chọn bằng phím mũi tên (1%, hoặc 5% khi giữ Shift), và xóa bằng Delete.
Câu hỏi thường gặp
clip-path trong CSS là gì?
Thuộc tính CSS clip-path định nghĩa một vùng cắt cho phần tử. Chỉ phần bên trong hình mới hiển thị; mọi thứ bên ngoài bị ẩn. Nó thường dùng cho bố cục không vuông vức, mặt nạ ảnh và các thành phần giao diện trang trí.
clip-path polygon hoạt động thế nào?
Giá trị polygon() là một danh sách các cặp tọa độ X/Y nối với nhau bằng các cạnh thẳng, ví dụ polygon(50% 0%, 100% 100%, 0% 100%) cho một tam giác. Mỗi điểm là phần trăm theo chiều rộng và chiều cao của phần tử. Trong công cụ này, bạn kéo các nút thay vì gõ các cặp tọa độ, và bộ tạo sẽ viết giá trị polygon cho bạn.
Làm sao thêm hoặc xóa một điểm đa giác?
Nhấp gần một cạnh trên canvas để chèn điểm mới giữa hai đỉnh gần nhất. Để xóa, nhấp đúp vào nút của nó, chọn nó rồi nhấn Delete hoặc Backspace, hoặc dùng nút xóa trong danh sách điểm. Một đa giác luôn giữ ít nhất 3 điểm, nên các nút xóa sẽ bị vô hiệu khi bạn đạt mức tối thiểu.
clip-path có bo góc được không?
Có, với hình inset. Từ khóa round trong inset() thêm border-radius cho hình chữ nhật bị cắt — ví dụ inset(10% round 20%) cắt 10% từ mỗi cạnh và bo tròn các góc 20%. Điều chỉnh ô Bo góc trên tab Inset để thiết lập.
Hình tròn và hình bầu dục khác nhau thế nào?
Hình tròn có một bán kính duy nhất và luôn tròn đều. Hình bầu dục có hai bán kính độc lập — một ngang (X) và một dọc (Y) — nên bạn có thể tạo các hình ô-van rộng hơn hoặc cao hơn so với chiều còn lại.
Tôi có nhập được clip-path CSS có sẵn không?
Có. Nhấn Nhập bên dưới khung kết quả CSS, dán giá trị của bạn (có hoặc không có tiền tố clip-path:), rồi áp dụng. Bộ phân tích xử lý cả bốn kiểu hình — polygon, circle, ellipse và inset — và nạp hình vào trình chỉnh sửa để bạn tinh chỉnh thêm.
clip-path có được tất cả trình duyệt hỗ trợ không?
Các hình cơ bản dùng ở đây — polygon, circle, ellipse và inset — đều được hỗ trợ trên mọi phiên bản hiện tại của Chrome, Firefox, Safari và Edge. Với trình duyệt rất cũ, hãy cung cấp phương án dự phòng hoặc một polyfill.
Hình của tôi có được lưu giữa các phiên không?
Không. Hình không được lưu qua các lần tải trang, nên hãy sao chép CSS trước khi rời đi. Bạn có thể tự lưu lại giá trị và mang nó về bất cứ lúc nào bằng tính năng Nhập.
Dữ liệu của tôi có gửi lên máy chủ không?
Không. Toàn bộ việc chỉnh sửa hình và tạo CSS diễn ra hoàn toàn trong trình duyệt của bạn. Không có dữ liệu nào được tải lên hay truyền đi, kể cả ảnh nền bạn tải lên để xem trước hình.
Chưa có bình luận nào. Hãy là người đầu tiên!