CSS Clip Path Maker là gì?

CSS Clip Path Maker là một trình chỉnh sửa trực quan để tạo hình dạng CSS clip-path. Thay vì viết các giá trị clip-path bằng tay, bạn có thể kéo các tay cầm trên canvas tương tác để thiết kế hình dạng của mình và sao chép mã CSS được tạo ra.

Xử lý phía máy khách: Tất cả chỉnh sửa diễn ra trong trình duyệt của bạn — không tải lên, không theo dõi, quyền riêng tư hoàn toàn.

Tại sao sử dụng Trình chỉnh sửa Clip-Path trực quan?

Thuộc tính CSS clip-path rất mạnh nhưng khó viết thủ công. Các hình dạng polygon yêu cầu các cặp tọa độ chính xác, và ngay cả những thay đổi nhỏ cũng cần tính toán lại nhiều giá trị. Một trình chỉnh sửa trực quan giải quyết vấn đề này bằng cách cho phép bạn:

Phản hồi Trực quan Tức thì

Kéo các tay cầm và xem hình dạng cập nhật trong thời gian thực trên canvas.

Điều khiển Chính xác

Sử dụng lưới phủ và đầu vào số để định vị chính xác với độ chính xác 0,1%.

28 Preset Sẵn sàng

Chọn từ các ngôi sao, mũi tên, khiên và hơn thế nữa — sau đó tùy chỉnh theo nhu cầu của bạn.

Nhập Mã Hiện có

Dán CSS clip-path hiện tại của bạn để chỉnh sửa nó một cách trực quan và tinh chỉnh thêm.

Các Loại Hình dạng Được hỗ trợ

Polygon

Tạo bất kỳ hình dạng nào với nhiều điểm được kết nối bằng các cạnh thẳng.

Circle

Xác định vùng cắt hình tròn với bán kính và tâm có thể điều chỉnh.

Ellipse

Tạo hình bầu dục với bán kính ngang và dọc độc lập.

Inset

Cắt từ các cạnh vào trong với border-radius tùy chọn cho các hình chữ nhật bo tròn.

Công Cụ Này Dành Cho Ai?

Các nhà phát triển frontend xây dựng các thành phần UI tùy chỉnh với các hình dạng không phải hình chữ nhật
Các nhà thiết kế web tạo các phần hero, mặt nạ hình ảnh và các yếu tố trang trí
Những người học CSS khám phá cách các giá trị clip-path hoạt động thông qua phản hồi trực quan

Table of Contents

1. CSS Clip Path Maker là gì?
2. Cách Sử dụng CSS Clip Path Maker
3. Tính Năng
4. Các Câu hỏi Thường gặp

Cách Sử dụng CSS Clip Path Maker

Tạo hình dạng clip-path chỉ mất vài bước. Hãy làm theo hướng dẫn này để nắm vững trình chỉnh sửa trực quan:

Chọn Loại Hình dạng

Nhấp vào một trong bốn tab hình dạng ở đầu trình chỉnh sửa:

Polygon - Cho các hình dạng tùy chỉnh với nhiều điểm (mặc định)
Circle - Cho cắt hình tròn
Ellipse - Cho các hình dạng bầu dục
Inset - Cho cắt hình chữ nhật từ các cạnh

Hoặc duyệt phần Presets để bắt đầu từ một hình dạng sẵn sàng như các ngôi sao, mũi tên hoặc khiên.

Chỉnh sửa Hình dạng

Mỗi loại hình dạng có các điều khiển chỉnh sửa riêng:

Chỉnh sửa Polygon

Kéo các tay cầm trên canvas để di chuyển các điểm
Nhấp vào một cạnh để thêm một điểm mới giữa các điểm hiện có
Nhấp đôi vào một tay cầm để xóa một điểm (tối thiểu 3 điểm bắt buộc)
Sử dụng danh sách điểm ở bên trái để nhập các giá trị X/Y chính xác

Chỉnh sửa Circle & Ellipse

Kéo tay cầm tâm để định vị lại hình dạng
Kéo tay cầm bán kính để thay đổi kích thước
Sử dụng thanh trượt để điều khiển chính xác bán kính và vị trí tâm

Chỉnh sửa Inset

Kéo tay cầm cạnh để điều chỉnh lượng được cắt từ mỗi bên
Bật Khóa Tất cả để thay đổi cả bốn cạnh cùng một lúc
Điều chỉnh Border Radius để làm tròn các góc của hình chữ nhật inset

Sử dụng Tùy chọn Canvas

Bên ngoài - Bật/tắt hiển thị vùng bên ngoài clip-path (hiển thị dưới dạng lớp phủ mờ)
Lưới - Hiển thị lưới phủ 10×10 để căn chỉnh
Nền - Thay đổi màu canvas hoặc tải lên hình ảnh để xem trước clip-path của bạn trên nội dung thực

Sao chép CSS

Mã CSS được tạo ra xuất hiện trong bảng điều khiển đầu ra ở bên phải. Nhấp Sao chép CSS để sao chép nó vào clipboard của bạn, sau đó dán nó vào stylesheet của bạn.

Phím Tắt

Phím Tắt	Hành động
`Ctrl` + `Z` / `Cmd` + `Z`	Hoàn tác thay đổi cuối cùng
`Ctrl` + `Y` / `Cmd` + `Shift` + `Z`	Làm lại thay đổi đã hoàn tác
Phím mũi tên	Điều chỉnh điểm polygon được chọn thêm 1%
`Shift` + Phím mũi tên	Điều chỉnh điểm polygon được chọn thêm 5%
`Delete` / `Backspace`	Xóa điểm polygon được chọn

Tính Năng

Trình Chỉnh sửa Trực quan Tương tác

Canvas hiển thị hình dạng clip-path của bạn trong thời gian thực. Kéo các tay cầm để sửa đổi hình dạng và xem mã CSS cập nhật ngay lập tức. Canvas sử dụng tỷ lệ khung hình 4:3 với tọa độ dựa trên phần trăm để định vị chính xác.

Xem trước thời gian thực: Mọi thay đổi bạn thực hiện đều được phản ánh ngay lập tức trong cả canvas trực quan và đầu ra CSS được tạo ra.

Hỗ trợ Hình dạng Toàn diện

Tất cả bốn hàm hình dạng CSS clip-path đều được hỗ trợ đầy đủ với các giao diện chỉnh sửa chuyên dụng:

Polygon

Xác định bất kỳ hình dạng nào với số lượng điểm không giới hạn được kết nối bằng các đường thẳng. Hoàn hảo cho các thiết kế hình học tùy chỉnh.

Circle

Một hình tròn hoàn hảo với bán kính và vị trí tâm có thể điều chỉnh. Lý tưởng cho các mặt nạ hình ảnh hình tròn và avatar.

Ellipse

Một hình bầu dục với bán kính ngang (X) và dọc (Y) độc lập. Tuyệt vời cho các hiệu ứng hình tròn kéo dài.

Inset

Cắt vào từ các cạnh với các góc bo tròn tùy chọn thông qua border-radius. Hoàn hảo cho các vùng nội dung có khung.

28 Preset Tích hợp sẵn

Bắt đầu từ bất kỳ 28 hình dạng preset nào được tổ chức trong 6 danh mục để tăng tốc độ quy trình làm việc của bạn:

Hình dạng Cơ bản

Tam giác, hình thang, hình thoi và các hình dạng hình học cơ bản khác.

Đa giác Đều

Ngũ giác, lục giác, thất giác và bát giác với các cạnh hoàn toàn đối xứng.

Ngôi sao

Ngôi sao 4 cánh, 5 cánh, 6 cánh, cộng với các hình dạng chữ thập và X cho các yếu tố trang trí.

Mũi tên

Mũi tên có hướng trong 4 hướng (lên, xuống, trái, phải) cộng với các biến thể chevron.

Hình dạng Phức tạp

Bong bóng tin nhắn, bevel, rabbet, khiên và các thiết kế hình học nâng cao khác.

Biến thể Circle/Ellipse/Inset

Các hình dạng hình tròn, bầu dục và inset được cấu hình trước với các cấu hình phổ biến.

Chỉnh sửa Điểm Chính xác

Đối với các hình dạng polygon, mọi điểm có thể được chỉnh sửa bằng số thông qua bảng điều khiển danh sách điểm. Mỗi điểm hiển thị tọa độ X và Y của nó với độ chính xác 0,1%. Chọn một điểm bằng cách nhấp vào hàng của nó, sau đó tinh chỉnh bằng các trường đầu vào hoặc phím mũi tên.

Mẹo chuyên nghiệp: Sử dụng phím mũi tên để điều chỉnh nhanh — giữ Shift để tăng 5% thay vì 1%.

Quản lý Điểm Thông minh

Thêm Điểm

Nhấp vào Cạnh

Nhấp vào bất kỳ nơi nào gần cạnh polygon
Điểm mới được chèn giữa các đỉnh gần nhất
Phải nằm trong khoảng ~5% của cạnh để đăng ký

Xóa Điểm

Nhiều Phương pháp

Nhấp đôi vào tay cầm trên canvas
Chọn điểm và nhấn Delete/Backspace
Nhấp vào nút xóa (×) trong danh sách điểm
Tối thiểu 3 điểm được thực thi

Tính Năng Khóa Inset

Khi làm việc với hình dạng inset, bật "Khóa Tất cả" để thay đổi tất cả bốn cạnh cùng một lúc. Điều này hữu ích khi bạn muốn cắt đồng nhất từ tất cả các cạnh. Thanh trượt border-radius thêm các góc bo tròn vào hình chữ nhật inset.

Ví dụ: Inset với các góc bo tròn

/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);

Lịch sử Hoàn tác/Làm lại

Mọi thay đổi hình dạng được ghi lại trong ngăn xếp lịch sử (tối đa 50 trạng thái). Sử dụng các nút hoàn tác/làm lại hoặc phím tắt bàn phím để bước qua lịch sử chỉnh sửa của bạn mà không mất công việc.

Dung lượng Lịch sử 50 trạng thái

Nhập CSS

Đã có giá trị clip-path? Nhấp "Nhập" và dán mã CSS của bạn. Công cụ phân tích các giá trị polygon, circle, ellipse và inset và tải chúng vào trình chỉnh sửa trực quan để chỉnh sửa thêm.

Nhập linh hoạt: Hoạt động với hoặc không có tiền tố clip-path: — chỉ cần dán giá trị và nhấp Áp dụng.

Trợ giúp Canvas

Hai tùy chọn lớp phủ giúp bạn làm việc hiệu quả hơn:

Lớp phủ Vùng Bên ngoài

Một lớp phủ mờ hiển thị vùng bên ngoài clip-path của bạn, làm rõ những gì sẽ hiển thị và những gì sẽ bị cắt.

Lưới 10×10

Một lưới dựa trên phần trăm để căn chỉnh chính xác và đối xứng khi định vị các điểm.

Nền Tùy chỉnh

Xem trước clip-path của bạn trên các nền khác nhau bằng cách thay đổi màu canvas hoặc tải lên hình ảnh. Điều này giúp hình dung cách hình dạng sẽ trông như thế nào trên nội dung thực tế trước khi triển khai nó trong thiết kế của bạn.

Bộ chọn màu đơn sắc cho nền đơn giản
Tải lên hình ảnh để xem trước nội dung thực tế
Chuyển đổi nền tức thì mà không mất hình dạng của bạn

Các Câu hỏi Thường gặp

CSS clip-path là gì?

Thuộc tính CSS clip-path xác định vùng cắt cho một phần tử. Chỉ phần bên trong hình dạng cắt mới hiển thị; mọi thứ bên ngoài bị ẩn. Nó thường được sử dụng để tạo bố cục không phải hình chữ nhật, mặt nạ hình ảnh và các yếu tố UI trang trí.

Trình duyệt nào hỗ trợ clip-path?

Thuộc tính clip-path với các hình dạng cơ bản (polygon, circle, ellipse, inset) được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Đối với các trình duyệt cũ hơn, hãy cân nhắc cung cấp dự phòng hoặc sử dụng polyfill.

Hỗ trợ xuất sắc: Hơn 97% trình duyệt toàn cầu hỗ trợ clip-path với các hình dạng cơ bản.

Làm cách nào để thêm một điểm vào polygon?

Nhấp vào bất kỳ nơi nào gần cạnh của polygon trên canvas. Một điểm mới sẽ được chèn giữa hai điểm hiện có gần nhất. Nhấp phải nằm trong khoảng xấp xỉ 5% của một cạnh để đăng ký.

Làm cách nào để xóa một điểm polygon?

Bạn có ba tùy chọn:

Nhấp đôi vào tay cầm trên canvas
Chọn điểm và nhấn Delete hoặc Backspace
Nhấp vào nút xóa (×) trong danh sách điểm

Yêu cầu tối thiểu: Một polygon phải luôn có ít nhất 3 điểm để vẫn hợp lệ.

Tôi có thể nhập CSS clip-path hiện có của mình không?

Có. Nhấp vào nút "Nhập" bên dưới đầu ra CSS, dán giá trị clip-path của bạn (với hoặc không có tiền tố clip-path:), và nhấp "Áp dụng". Công cụ hỗ trợ tất cả bốn loại hình dạng: polygon, circle, ellipse và inset.

Sự khác biệt giữa circle và ellipse là gì?

Circle

Bán kính Đơn

Một giá trị bán kính
Luôn hoàn toàn tròn
Chiều rộng và chiều cao bằng nhau

Ellipse

Hai Bán kính Độc lập

Bán kính X và Y riêng biệt
Tạo hình dạng bầu dục
Có thể rộng hơn hoặc cao hơn

Giá trị "round" trong inset làm gì?

Tham số "round" trong inset() thêm border-radius vào hình chữ nhật được cắt. Ví dụ:

Inset với các góc bo tròn

/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);

Tại sao tôi không thể xóa một điểm polygon?

Một polygon yêu cầu ít nhất 3 điểm để là một hình dạng hợp lệ. Nếu bạn chỉ có 3 điểm còn lại, các điều khiển xóa sẽ bị vô hiệu hóa để ngăn tạo một polygon không hợp lệ.

Tọa độ chính xác đến mức nào?

Tất cả tọa độ sử dụng giá trị phần trăm với độ chính xác 0,1% (một chữ số thập phân). Điều này cung cấp độ chính xác đủ cho hầu hết các trường hợp sử dụng trong khi giữ đầu ra CSS sạch sẽ và dễ đọc.

Tôi có thể sử dụng hình ảnh nền để xem trước không?

Có. Nhấp vào nút tải lên bên cạnh bộ chọn màu trong vùng cài đặt canvas. Chọn tệp hình ảnh và nó sẽ được hiển thị làm nền canvas, cho phép bạn xem trước cách hình dạng clip-path của bạn sẽ trông như thế nào trên nội dung thực tế.

Các hình dạng của tôi có được lưu giữa các phiên không?

Không, các hình dạng không được lưu giữ giữa các lần tải trang. Hãy chắc chắn sao chép mã CSS của bạn trước khi rời khỏi trang. Bạn cũng có thể lưu các giá trị clip-path của bạn bên ngoài và nhập chúng sau này bằng tính năng Nhập.

Hãy nhớ lưu: Luôn sao chép đầu ra CSS của bạn trước khi đóng trang để tránh mất công việc.

Dữ liệu của tôi có được gửi đến bất kỳ máy chủ nào không?

Không. Tất cả chỉnh sửa hình dạng 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 hoặc truyền đến bất kỳ máy chủ nào, bao gồm bất kỳ hình ảnh nền nào bạn tải.

100% phía máy khách: Quyền riêng tư của bạn được đảm bảo — tất cả xử lý diễn ra cục bộ trên thiết bị của bạn.