Trình tạo CSS Clip-Path

Cách sử dụng

1. Chọn một loại hình dạng: đa giác, hình tròn, elip hoặc inset (hình chữ nhật với các góc bo tròn tùy chọn).
2. Kéo các điểm điều khiển: di chuyển các tay cầm hình dạng trên bản xem trước để tùy chỉnh chính xác vùng mặt nạ.
3. Sao chép CSS: giá trị thuộc tính clip-path được tạo sẵn sàng để dán vào stylesheet của bạn.

Tại sao sử dụng trình tạo CSS clip-path?

CSS clip-path tạo ra các hình dạng phi chữ nhật bằng cách che mọi thứ bên ngoài một vùng được xác định. Nó được sử dụng cho các phân tách phần chéo, cắt hình ảnh hình lục giác, hình dạng nút tùy chỉnh, hiệu ứng di chuột sáng tạo và lộ ảnh được che. Viết tay tọa độ đa giác clip-path liên quan đến tính phần trăm của mỗi đỉnh, tốn công và khó hình dung. Trình tạo tương tác này cho phép bạn kéo các điểm trực quan và có được giá trị CSS chính xác ngay lập tức.

Tính năng

• Trình chỉnh sửa đa giác: thêm, di chuyển và xóa các đỉnh để tạo ra bất kỳ hình dạng nào.
• Cài đặt sẵn tích hợp: chéo, chevron, lục giác, ngôi sao, tam giác và các hình dạng phổ biến khác.
• Chế độ hình tròn và elip: điều khiển trực quan cho mặt nạ hình tròn hoặc elip.
• Chế độ inset: tạo các mặt nạ hình chữ nhật với border-radius riêng cho từng góc.
• Bản xem trước vùng được che: xem phần được che được làm nổi bật để biết chính xác những gì sẽ được ẩn.

Câu hỏi thường gặp

clip-path có ảnh hưởng đến vùng có thể nhấp không?

Có. Theo mặc định, các sự kiện con trỏ chỉ được đăng ký bên trong vùng mặt nạ, vùng được che cả vô hình và không thể nhấp. Để làm cho phần tử hoàn toàn có thể nhấp trong khi vẫn che nó về mặt thị giác, hãy sử dụng pointer-events: all trên phần tử hoặc xếp chồng một lớp trong suốt.

Tôi có thể animate clip-path không?

Có, clip-path có thể là chủ đề của các chuyển tiếp và hoạt ảnh CSS. Hoạt hình giữa hai đa giác có cùng số điểm để có hiệu ứng morph mượt mà. Các hình dạng có số điểm khác nhau sẽ animate bằng cách nhảy thay vì nội suy.

clip-path có được hỗ trợ bởi tất cả các trình duyệt không?

clip-path được hỗ trợ bởi tất cả các trình duyệt hiện đại. Đối với các hình dạng SVG thông qua cú pháp url(#id), hỗ trợ thậm chí còn rộng hơn. Các giá trị cơ bản polygon, circle, ellipse và inset hoạt động phổ quát trên Chrome, Firefox, Safari và Edge.

CSS clip-path thực sự làm gì

Thuộc tính CSS clip-path che một phần tử thành một hình dạng đã chọn: bất cứ thứ gì bên trong hình dạng đều hiển thị, mọi thứ bên ngoài trở nên trong suốt. Hộp bố cục của phần tử không thay đổi (nó vẫn chiếm cùng một hình chữ nhật cho các mục đích sụp đổ lề, dòng chảy và định vị anh chị em), nhưng chỉ các pixel bên trong vùng clip được vẽ. Điều này làm cho clip-path khác với việc cắt (vĩnh viễn thay đổi hình ảnh) và khác với định vị (di chuyển mọi thứ): clip-path là một mặt nạ thời gian hiển thị được áp dụng ngay trước khi các pixel đến màn hình.

Có bốn hàm hình dạng cơ bản: polygon() (danh sách các đỉnh dưới dạng tọa độ phần trăm hoặc pixel), circle() (bán kính cộng với một tâm), ellipse() (hai bán kính cộng với một tâm) và inset() (một hình chữ nhật được đo từ mỗi cạnh, tùy chọn với các góc tròn). Đối với các hình dạng quá phức tạp cho bốn cái này (các đường cong không đều, các ngôi sao có các đường lõm, các đường viền thư pháp), clip-path cũng chấp nhận một đường dẫn SVG thông qua path() hoặc một tham chiếu đến một phần tử SVG thông qua url(#id). Trình duyệt vẽ phần tử, sau đó tổng hợp nó thông qua mặt nạ alpha được xác định bởi hình dạng của bạn.

clip-path quan trọng đối với thiết kế web hiện đại vì nó cho phép các hình dạng mà cách đây một thập kỷ sẽ yêu cầu trình chỉnh sửa hình ảnh. Một dải phân chia phần chéo, một lưới avatar lục giác, một biểu ngữ chevron, một bức ảnh hình ngôi sao: tất cả bây giờ có thể trong CSS thuần túy, có thể mở rộng đến bất kỳ kích thước nào, có thể hoạt hình khi di chuột và có thể truy cập được vì phần tử cơ bản vẫn là HTML, không phải hình ảnh rasterized. Đánh đổi là sự dài dòng: viết polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) bằng tay cho một viên kim cương đơn giản là khả thi, nhưng một ngôi sao 12 đỉnh hoặc một logo cutout tùy chỉnh là không thực tế nếu không có một trình chỉnh sửa trực quan. Đó là nơi trình tạo này phù hợp.

Cách công cụ này hoạt động bên trong

Bản xem trước là một div với clip-path đã chọn của bạn được áp dụng dưới dạng CSS nội tuyến, được cập nhật trên mỗi lần kéo của một tay cầm điều khiển. Tay cầm là các hình tròn được định vị tuyệt đối được phủ lên trên bản xem trước tại tọa độ phần trăm của mỗi đỉnh. Khi bạn kéo một tay cầm, JavaScript bắt sự kiện mousemove (hoặc touchmove), chuyển đổi vị trí pixel thành phần trăm khu vực xem trước, cập nhật đỉnh đó trong đa giác trong bộ nhớ và áp dụng lại chuỗi clip-path. Kết xuất thời gian thực có nghĩa là bạn thấy hình dạng thay đổi khi bạn kéo, không phải sau đó.

CSS được tạo được xây dựng bằng cách nối các đỉnh thành một chuỗi đa giác: polygon(x1% y1%, x2% y2%, ...) cho chế độ đa giác, hoặc circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) cho các loại hình dạng đơn giản hơn. Giá trị phần trăm thay vì giá trị pixel được sử dụng vì phần trăm tự động co giãn với phần tử: một đa giác trông đúng ở 300x200 cũng trông đúng ở 600x400 mà không cần thay đổi CSS. Hộp mã cập nhật trên mọi tương tác và nút Copy CSS ghi giá trị hiện tại vào clipboard của bạn.

Không có gì rời khỏi trình duyệt của bạn. Bản xem trước, tính toán hình dạng, tạo CSS và sao chép clipboard đều là JavaScript phía máy khách. Không có yêu cầu mạng nào được thực hiện; không có hình ảnh nào được tải lên; không có phân tích nào về các lựa chọn hình dạng của bạn. Công cụ không có bất kỳ phần phụ trợ nào ngoài HTML tĩnh và JavaScript được phục vụ một lần khi tải đầu tiên. Mở tab mạng của trình duyệt trong quá trình sử dụng và bạn sẽ thấy không yêu cầu nào sau khi tải trang ban đầu. CSS mà bạn tạo là của bạn để dán vào bất kỳ stylesheet nào.

Lịch sử ngắn gọn về kẹp CSS

• SVG clipPath, 2001.Đặc tả SVG 1.0 (Khuyến nghị W3C, tháng 9 năm 2001) giới thiệu , cho phép bất kỳ phần tử SVG nào được che bởi một hình dạng khác. Cắt SVG xử lý các đường dẫn phức tạp nhưng yêu cầu markup SVG nội tuyến, hạn chế việc tái sử dụng trong các trang HTML thuần túy mà không có sự thông thạo SVG.
• Thuộc tính CSS clip, 1998 đến những năm 2010.Thuộc tính CSS clip gốc (đặc tả CSS 2, 1998) chỉ hỗ trợ rect(), một clip hình chữ nhật bốn giá trị trên các phần tử được định vị tuyệt đối. Hạn chế và không được khuyến khích vào năm 2014, nhưng vẫn được thấy trong các mẫu CSS "chỉ trình đọc màn hình" cũ nơi nội dung hiển thị được cắt thành 1x1 pixel để dễ truy cập.
• CSS Masking Module Level 1, 2014.W3C công bố đặc tả CSS Masking Module Level 1 (tháng 4 năm 2014), giới thiệu thuộc tính clip-path hiện đại với hỗ trợ đa giác, hình tròn, hình elip, inset và đường dẫn SVG. Chrome 24 (tháng 1 năm 2013) và Safari 7 (tháng 6 năm 2013) vận chuyển các hình dạng cơ bản trước đặc tả chính thức; Firefox theo sau ở phiên bản 54 (tháng 6 năm 2017).
• Làn sóng thiết kế web brutalist Adobe, 2015 đến 2017.Các phần hero với các vết cắt chéo, các phân cách biểu ngữ góc cạnh và các lưới ảnh nhóm lục giác trở thành một xu hướng thiết kế, được thúc đẩy bởi các công cụ như Webflow và các bài viết thiết kế trên CSS-Tricks. Các danh mục đầu tư phong cách Awwwards nổi bật các thủ thuật clip-path nổi bật, và thuộc tính chuyển từ "sự tò mò CSS mơ hồ" sang "kỹ thuật hiện đại được mong đợi."
• Internet Explorer chết, 2022.Microsoft rút lui Internet Explorer vào ngày 15 tháng 6 năm 2022, chấm dứt rào cản trình duyệt có ý nghĩa cuối cùng đối với các tính năng CSS hiện đại bao gồm clip-path. Đến năm 2023, "có hỗ trợ clip-path không?" không còn là mối quan tâm nghiêm trọng trên các trình duyệt nữa và thuộc tính trở thành một công cụ mặc định trong thiết kế chỉ CSS.
• Hàm CSS shape(), 2024 và xa hơn.CSS Shapes Module tiếp tục phát triển với các đề xuất như shape() (một thay thế linh hoạt hơn cho path() sử dụng cú pháp thân thiện với CSS thay vì các chuỗi đường dẫn SVG), cho phép các hình dạng phức tạp mà không cần chuyển ngữ cảnh SVG. Hỗ trợ trình duyệt đang được triển khai trong suốt năm 2025 và 2026.

Quy trình trong thế giới thực

• Cắt chéo phần hero.Mẫu "hero hình thang" trong đó cạnh dưới của một phần hero được nghiêng chéo thay vì ngang là một trong những cách sử dụng clip-path phổ biến nhất. Một polygon(0 0, 100% 0, 100% 90%, 0 100%) đơn giản tạo ra một độ nghiêng 10% từ dưới trái lên trên phải. Thêm một phần thứ hai bên dưới với độ nghiêng ngược và bạn có được bố cục "giấy rách" hoặc "các góc xếp chồng" cảm thấy có chủ ý mà không cần bất kỳ hình ảnh nào.
• Lưới avatar lục giác.Các trang nhóm, danh sách đóng góp viên hoặc danh sách thể thao thường sử dụng cắt ảnh lục giác cho một thay thế năng động hơn cho avatar tròn. Một clip-path đa giác sáu đỉnh tạo ra hình lục giác; CSS grid sắp xếp bố cục tổ ong so le. So với cắt trong Photoshop, các bức ảnh vẫn nguyên bản và không bị sửa đổi: thay đổi hướng lục giác hoặc chuyển sang hình tròn với một chỉnh sửa CSS duy nhất.
• Hiệu ứng tiết lộ hình ảnh khi di chuột.Animation clip-path khi di chuột tạo ra "tiết lộ hình ảnh" nơi một phần được cắt mở rộng mượt mà. Các mẫu phổ biến: một hình ảnh bắt đầu là một hình tròn nhỏ và mở rộng đến độ che phủ đầy đủ khi di chuột, hoặc một đa giác bắt đầu là một vạch mỏng và phát triển thành một hình chữ nhật đầy đủ. Chuyển tiếp CSS trên clip-path nội suy giữa hai đa giác có cùng số đỉnh một cách mượt mà, tạo ra các hoạt hình 60fps mà không cần JavaScript.
• Hình dạng nút tùy chỉnh.Giao diện trò chơi, các giao diện tương lai và các danh mục đầu tư sáng tạo thường sử dụng các nút không hình chữ nhật (hình mũi tên, hình lục giác, hình bình hành). clip-path che một phần tử nút tiêu chuẩn theo hình dạng đã chọn, giữ nút cơ bản có thể truy cập (vẫn có thể focus, vẫn có thể nhấp được bằng bàn phím, vẫn có thể thông báo được bằng trình đọc màn hình) trong khi trình bày một hình ảnh tùy chỉnh.
• Các dải phân chia phần trang trí.Các dải phân chia sóng, dải phân chia chevron và dải phân chia "trang rách" giữa các phần trang trước đây yêu cầu hình ảnh SVG nền hoặc hình ảnh theo từng phần. clip-path tạo ra chúng trong CSS thuần túy bằng cách sử dụng một inset với các góc tròn hoặc một đa giác theo sóng mong muốn. Các dải phân chia tự động co giãn và phản hồi với các thay đổi bố cục.
• Bộ sưu tập ảnh sáng tạo.Các bố cục thư viện ảnh sử dụng hình thu nhỏ hình chữ nhật đồng nhất cảm thấy chung chung; cắt mỗi hình thu nhỏ thành một hình đa giác hơi khác nhau tạo ra cảm giác cắt dán bằng tay mà không cần che thủ công mỗi hình ảnh. Một tập nhỏ gồm 3 đến 5 biến thể đa giác được xoay vòng qua lưới tạo ra nhịp điệu hình ảnh trong khi vẫn duy trì hiệu suất (cùng một hình dạng chỉ được áp dụng transform cho các nguồn hình ảnh khác nhau).

Các cạm bẫy phổ biến và ý nghĩa của chúng

• clip-path không thay đổi bố cục.Một bất ngờ phổ biến: cắt một phần tử thành hình dạng nhỏ hơn không làm giảm không gian nó chiếm trong luồng tài liệu. Phần tử vẫn chiếm toàn bộ hộp bố cục của nó; clip-path chỉ thay đổi những gì được vẽ. Để có được một phần tử thực sự chiếm ít không gian hơn, bạn cũng cần thay đổi kích thước nó. Nếu bạn muốn nội dung được cắt thực sự cắt, hãy sử dụng overflow: hidden trên một wrapper hoặc sử dụng CSS mask với hộp bố cục nhỏ hơn.
• Không khớp tỷ lệ khía cạnh làm hỏng tọa độ phần trăm.Tọa độ đa giác được biểu thị dưới dạng phần trăm co giãn đồng đều với phần tử. Một hình dạng kim cương polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) vẫn là một viên kim cương ở bất kỳ kích thước nào, nhưng nó trở thành một hình thoi rộng hơn hoặc cao hơn nếu tỷ lệ khía cạnh của phần tử thay đổi. Đối với các hình dạng cần duy trì sự nhất quán trực quan trên các tỷ lệ khía cạnh, hãy sử dụng các giá trị pixel hoặc các tính toán min(50vw, 50vh), hoặc ràng buộc tỷ lệ khía cạnh của phần tử với thuộc tính CSS aspect-ratio.
• Các vùng được cắt không thể nhấp được.Các sự kiện con trỏ chỉ đăng ký nơi phần tử có thể nhìn thấy sau khi cắt. Một nút được cắt thành hình tam giác chỉ có thể nhấp trên hình tam giác, không phải trên không gian hình chữ nhật vô hình mà nó chiếm. Điều này thường được mong muốn (không có nhấp chuột nhầm trên không gian trống), nhưng có thể gây nhầm lẫn khi nhiều nút được cắt chồng lên nhau hoặc khi nội dung tương tác mở rộng trực quan bên ngoài vùng clip.
• Animation nhiều phần tử được cắt tốn kém.clip-path kích hoạt tổng hợp trên mỗi khung hoạt hình, có thể giảm tốc độ khung hình nếu áp dụng cho nhiều phần tử cùng lúc hoặc trên các phần tử lớn (các phần hero toàn màn hình). Đối với các hoạt hình 60fps, hạn chế số lượng các phần tử được cắt đang hoạt hình đồng thời, ưu tiên các hình dạng đơn giản hơn (đa giác 4 đến 6 đỉnh thay vì 20 đỉnh) và xem xét sử dụng CSS will-change: clip-path trên các phần tử bạn dự định hoạt hình để gợi ý cho trình duyệt tăng tốc GPU.
• Các đa giác cần số đỉnh phù hợp để biến hình.Animation clip-path giữa hai hình dạng đa giác chỉ hoạt động nếu cả hai đa giác có cùng số đỉnh. Đi từ tam giác (3 điểm) sang hình vuông (4 điểm) snap ngay lập tức thay vì biến hình mượt mà. Đối với biến hình mượt mà giữa các hình dạng có độ phức tạp trực quan khác nhau, xác định cả hai đa giác với cùng số điểm, đặt các điểm thêm ở tọa độ "ẩn" chúng trên một trong các hình dạng (ví dụ, hai điểm trên đầu nhau).
• Safari yêu cầu tiền tố -webkit- cho cú pháp đường dẫn SVG.Các hình dạng cơ bản (polygon, circle, ellipse, inset) hoạt động không cần tiền tố trên tất cả các trình duyệt hiện đại. Nhưng Safari vẫn yêu cầu tiền tố -webkit-clip-path khi sử dụng hàm path() hoặc tham chiếu clipPaths SVG url(#id). Để có khả năng tương thích trên các trình duyệt, khai báo cả -webkit-clip-path và clip-path với cùng giá trị cho việc cắt dựa trên đường dẫn SVG. Các trình tự động thêm tiền tố (Autoprefixer, PostCSS) xử lý điều này tự động trong các thiết lập xây dựng hiện đại.

Quyền riêng tư: mọi thứ chạy trong trình duyệt của bạn

Các công cụ trình tạo CSS truyền thống chia thành hai phe: các trang HTML đơn giản với JavaScript phía máy khách (riêng tư, nhanh, không cần tài khoản) và các trình chỉnh sửa đầy đủ tính năng với các dự án được lưu trên đám mây (cộng tác, nhưng mỗi chỉnh sửa hình dạng được ghi lại trên máy chủ của người khác). Công cụ này thuộc về phe đầu tiên một cách kiên định. Tọa độ đa giác bạn kéo, màu sắc bạn chọn, CSS bạn sao chép: tất cả ở lại trong phiên trình duyệt của bạn, không bao giờ được gửi đi đâu. Làm mới trang và trạng thái biến mất trừ khi bạn đã sao chép CSS trước.

Hàm ý quyền riêng tư quan trọng nhất đối với công việc độc quyền. Một cơ quan thiết kế tạo nguyên mẫu một hình dạng nút tùy chỉnh cho một thiết kế lại thương hiệu bí mật, một nhà phát triển độc lập làm việc trên một giao diện trò chơi chưa công bố, một nhóm doanh nghiệp thiết kế bố cục cho một sản phẩm vẫn đang trong NDA: bất kỳ ngữ cảnh nào mà chính hình dạng hoặc lịch sử lặp lại của nó có thể tiết lộ thông tin về công việc đang diễn ra. Với công cụ này, không có rủi ro đó tồn tại vì không có gì bị bắt. Mở tab Mạng của trình duyệt trong khi kéo tay cầm và bạn sẽ thấy không có yêu cầu đi ra.

Khi một công cụ khác là lựa chọn đúng

• Trình chỉnh sửa SVG cho các đường dẫn phức tạp.Đối với các đường cong không đều, các hình dạng thư pháp, hoặc bất cứ thứ gì vượt ra ngoài các hàm hình dạng cơ bản, vẽ hình dạng trong Figma, Inkscape, hoặc Adobe Illustrator và xuất dưới dạng đường dẫn SVG thực tế hơn là mã hóa các tọa độ clip-path bằng tay. Sau đó sử dụng clip-path: path('M...') hoặc tham chiếu SVG bằng ID. Các trình chỉnh sửa SVG cung cấp các tay cầm bezier và độ chính xác; các trình tạo clip-path thì không.
• CSS mask cho pha trộn alpha và gradient.clip-path tạo ra một alpha nhị phân (hoàn toàn hiển thị hoặc hoàn toàn được cắt). Đối với các hình dạng có cạnh mềm (mờ dần gradient, đường cong khử răng cưa, độ trong suốt một phần), CSS mask hoặc mask-image xử lý các gradient alpha đầy đủ. mask hỗ trợ một hình ảnh mặt nạ (bất kỳ PNG, SVG hoặc gradient nào) trong đó các pixel đen ẩn và các pixel trắng hiển thị, với màu xám cho độ mờ một phần. clip-path không thể làm điều đó.
• Xử lý hình ảnh cho các vết cắt vĩnh viễn.Nếu bạn muốn chính tệp hình ảnh cuối cùng được cắt thành một hình dạng (kích thước tệp nhỏ hơn, không có chi phí clip-path, không có rủi ro dự phòng chưa được cắt), hãy thực hiện việc cắt trong một trình chỉnh sửa hình ảnh hoặc công cụ Image Compressor của chúng tôi. clip-path là để che thời gian hiển thị trên các phần tử HTML; nếu mục tiêu là một tài sản hình ảnh tĩnh, hãy cắt tệp trực tiếp.
• Figma hoặc Sketch cho các mockup thiết kế.Trong khi tạo nguyên mẫu một bố cục, các công cụ vector của Figma xử lý khám phá hình dạng phức tạp nhanh hơn so với kéo tay cầm clip-path. Sử dụng công cụ thiết kế để tìm hình dạng bạn muốn, sau đó dịch hình dạng cuối cùng thành CSS clip-path cho sản xuất. Công cụ thiết kế cũng xử lý các lặp lại, lịch sử undo và nhận xét nhóm tốt hơn so với một trình tạo CSS thời gian thực.

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

Tôi có thể sử dụng phần trăm hoặc pixel cho tọa độ đỉnh không?

Cả hai đều hoạt động. Phần trăm co giãn với hộp của phần tử, vì vậy một đa giác được xác định bằng phần trăm giữ hình dạng tỷ lệ khi phần tử thay đổi kích thước. Pixel là tuyệt đối, vì vậy một đa giác với tọa độ pixel giữ cùng kích thước bất kể phần tử. Sử dụng phần trăm cho các hình dạng nên thay đổi kích thước với bố cục (hầu hết các trường hợp) và pixel cho các hình dạng cần vị trí pixel chính xác (ví dụ, căn chỉnh với một phần tử thiết kế cụ thể). Bạn cũng có thể trộn: polygon(50% 10px, 100% 50%, ...) hợp lệ.

clip-path có ảnh hưởng đến SEO hoặc trình đọc màn hình không?

Không. clip-path là một thuộc tính chỉ trực quan. HTML bên dưới hoàn toàn có thể truy cập: văn bản bên trong một phần tử được cắt vẫn được lập chỉ mục bởi các công cụ tìm kiếm, vẫn được thông báo bởi các trình đọc màn hình, vẫn có thể chọn bằng điều hướng bàn phím. Sử dụng clip-path để tạo kiểu trực quan; không sử dụng nó như một cách để ẩn nội dung theo ngữ nghĩa (điều đó yêu cầu các thuộc tính display: none hoặc aria-hidden). Nội dung được cắt trực quan vẫn hiện diện trong cây khả năng truy cập.

Làm thế nào để tôi làm cho clip-path đáp ứng?

Sử dụng phần trăm thay vì pixel và kiểm tra kết quả ở các điểm dừng khác nhau. Đối với các hình dạng cần tỷ lệ khác nhau trên di động so với máy tính để bàn, hãy sử dụng truy vấn phương tiện CSS để hoán đổi giá trị clip-path: khai báo một clip-path khác bên trong @media (max-width: 768px) cho hình dạng di động. Đối với các nhu cầu đáp ứng phức tạp (ví dụ, một đa giác trở thành hình tròn trên di động), hãy xem xét sử dụng JavaScript để tính toán lại clip-path dựa trên kích thước cửa sổ, mặc dù các cách tiếp cận CSS thuần túy xử lý hầu hết các trường hợp.

clip-path có thể được áp dụng cho video và iframe không?

Có. clip-path hoạt động trên bất kỳ phần tử HTML nào, bao gồm và