Cách dùng CSS Zigzag Border
- Xem trước bắt đầu với cạnh dưới zigzag; chỉnh số răng bằng Repeats.
- Chọn Scallops để có răng tròn hoặc Steps để có dạng bậc thang.
- Chọn Both để có kiểu hóa đơn hoặc vé.
- Sao chép CSS.
Viền zigzag với clip-path
Mỗi răng là hai điểm của polygon: một điểm nằm trên cạnh, một điểm lõm vào theo độ sâu của răng. Vì vị trí x được tính bằng phần trăm, các răng luôn trải đều toàn bộ chiều rộng; đặt độ sâu bằng px để chiều cao răng không đổi. Với kiểu hóa đơn, hãy cắt cả hai cạnh với độ sâu nhỏ và nhiều lần lặp.
Thêm nhiều kiểu viền khác trong Section Divider Generator.
Cũng được tìm dưới tên: zigzag border css, viền zigzag css, viền răng cưa css, sawtooth border css, viền sóng css, hiệu ứng viền hóa đơn css, viền vé css.
Các công cụ dùng kèm tốt với CSS Zigzag Border
- Section nghiêng CSS — Tạo section nghiêng, xéo hoặc chéo — kiểu trang đích quen thuộc — chỉ với một quy tắc clip-path.
- Đường cong chia section — Bo cong mép dưới hoặc mép trên của hero hay section bằng đường cong — lồi, lõm, góc cong, sóng nhẹ hoặc viền răng cưa — chỉ với CSS.
- Công cụ tạo tam giác CSS — Tạo tam giác thuần CSS cho mũi tên tooltip, dấu caret dropdown hoặc bong bóng thoại: chọn một trong 8 hướng, nhập chiều rộng, chiều cao và màu, rồi sao chép mã theo kỹ thuật border cổ điển hoặc phiên bản clip-path đơn giản hơn.
- Công cụ tạo CSS Clip-path — Cắt ảnh và phần tử thành hình dạng bất kỳ: chọn một trong 15 hình mẫu có sẵn như tam giác, lục giác, ngôi sao, mũi tên, chevron, bong bóng thoại, hình tròn, hình elip, hình chữ nhật bo góc… rồi kéo các điểm trên ảnh mẫu hoặc ảnh của bạn.
Câu hỏi thường gặp
Làm sao tạo viền zigzag bằng CSS?
Dùng clip-path: polygon() với các điểm xen kẽ giữa cạnh và độ sâu cắt dọc theo chiều rộng. Ở đây, chọn Zigzag, đặt số lần lặp rồi sao chép CSS.
Có thể tạo viền giấy hóa đơn bị rách không?
Có. Chọn Zigzag, cạnh Both, độ sâu nhỏ (8–12 px) và 20 lần lặp trở lên.
Làm sao giữ các răng có kích thước đều nhau trên màn hình rộng?
Số răng là cố định nên trên màn hình rộng các răng sẽ to hơn. Nếu muốn chiều rộng răng cố định, hãy dùng mask lặp với conic-gradient, hoặc tăng số răng cho máy tính bằng media query.
Tôi có thể cài CSS Zigzag Border như một ứng dụng web và dùng khi không có mạng không?
Có. CSS Zigzag Border là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.