Công cụ tạo clip-path CSS: xem trước trực tiếp
Công cụ tạo clip-path CSS này tạo các giá trị dùng ngay được cho các đa giác tam giác, ngũ giác, lục giác, ngôi sao, mũi tên và hình thoi, cùng các hình inset, circle và ellipse. Hãy điều chỉnh các tùy chọn có sẵn, bao gồm bo góc tùy chọn cho inset, và xem từng hình trong bản xem trước trực tiếp trên nền gradient. Bản xem trước giúp bạn hiểu kết quả bị cắt trước khi sao chép CSS vào dự án.
Công cụ tạo clip-path CSS này tạo các giá trị CSS cho những hình cắt phổ biến và hiển thị từng kết quả trong bản xem trước trực tiếp. Hãy chọn trong các mẫu đa giác cho tam giác, ngũ giác, lục giác, ngôi sao, mũi tên và hình thoi, hoặc tạo hình inset, circle hay ellipse. Mã CSS đã sẵn sàng để sao chép vào dự án của bạn.
Công cụ ánh xạ mỗi hình đã chọn thành một giá trị clip-path CSS. Các lựa chọn đa giác dùng hình đa giác, còn inset, circle và ellipse tương ứng với các hàm hình CSS của chúng. Các tùy chọn có sẵn cho phép cấu hình hình dạng, bao gồm bo góc tùy chọn cho inset. Bản xem trước gradient giúp vùng bị cắt dễ quan sát hơn trước khi bạn dùng giá trị đã tạo.
Các giá trị clip-path CSS mô tả phần nào của phần tử còn hiển thị bằng cách định nghĩa một hình cắt. Bản xem trước trực tiếp giúp bạn hình dung kết quả đó, còn mã CSS đã sao chép cho bạn giá trị để dùng trong mã của mình. Việc này hữu ích khi bạn cần giá trị mẫu để kiểm thử, muốn nhiều lựa chọn cùng lúc, hoặc thích xem hình hơn là tự nghĩ giá trị bằng tay.
Công cụ tạo chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, lưu trữ hay gửi tới máy chủ, và sau khi trang đã tải xong công cụ tiếp tục hoạt động ngoại tuyến. Công cụ hữu ích cho lập trình viên và nhà thiết kế cần ví dụ clip-path nhanh, cũng như kỹ sư DevOps chuẩn bị dữ liệu kiểm thử hoặc fixture.
Bước 1: Chọn loại hình, ví dụ mẫu đa giác, inset, circle hoặc ellipse. Các mẫu đa giác gồm tam giác, ngũ giác, lục giác, ngôi sao, mũi tên và hình thoi.
Bước 2: Thiết lập các tùy chọn có sẵn cho hình đã chọn. Với hình inset, bạn cũng có thể chọn bo góc tùy chọn.
Bước 3: Xem lại bản xem trước trực tiếp trên nền gradient để thấy hình cắt nội dung ra sao.
Bước 4: Sao chép giá trị clip-path CSS đã tạo và dùng trong dự án, kiểm thử, fixture hoặc dữ liệu mẫu của bạn.
Trường hợp sử dụng: Tạo các giá trị clip-path CSS dùng ngay được cho kiểm thử, fixture hoặc dữ liệu mẫu thay vì viết từng giá trị bằng tay.
Trường hợp sử dụng: Tạo hàng loạt giá trị clip-path cùng lúc khi cần nhiều ví dụ hình dạng cho dự án hoặc bộ kiểm thử.
Trường hợp sử dụng: Lấy các giá trị ngẫu nhiên đúng chuẩn cho dữ liệu mẫu khi việc gõ tay phỏng đoán kém hữu ích hơn.
Trường hợp sử dụng: Xem trước mẫu đa giác như ngôi sao hoặc mũi tên trước khi sao chép CSS của nó vào trang.
Trường hợp sử dụng: So sánh trực quan các hình inset, circle và ellipse để quyết định hình cắt nào hợp với thiết kế.
Trường hợp sử dụng: Chuẩn bị các giá trị hình dùng ngay được cho bản mẫu, để bạn thử các tùy chọn cắt khác nhau mà không cần tự soạn từng giá trị.