Cách dùng Đường cong chia section
- Bản xem trước bắt đầu với đường cong lồi ở mép dưới; chọn Lõm để đảo ngược.
- Thử Góc cong, Sóng hoặc Viền răng cưa rồi đặt số lần lặp lại.
- Đặt độ sâu đường cong và cạnh áp dụng (dưới, trên hoặc cả hai).
- Sao chép CSS.
Đường cong với clip-path
Đường cong là một polygon() gồm nhiều điểm bám theo cung tròn, mỗi điểm được đặt bằng calc(100% - …) để độ sâu giữ cố định theo px hoặc vw. Với đáy hình elip đơn giản, bạn cũng có thể dùng border-radius: 0 0 50% 50% / 0 0 80px 80px, nhưng cách này làm cong cả các góc của khối nội dung; còn phiên bản clip-path chỉ cắt đúng mép.
Với sóng nhiều lớp, xem SVG Wave Generator; với góc cạnh và zigzag, xem Section Divider Generator.
Cũng được tìm dưới tên: css section cong, css chia section cong, css bo cong đáy section, css hero section cong, css đường cong chia section, css bo góc đáy section, css viền cong section.
Các công cụ dùng kèm tốt với Đường cong chia section
- 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.
- CSS Zigzag Border — Tạo viền zigzag, răng cưa, viền sóng hoặc bậc thang cho section, card, phiếu giảm giá và thiết kế hóa đơn.
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- 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 thế nào để tạo đáy cong cho một section?
Chọn Cong và sao chép CSS: một clip-path polygon sẽ vẽ đường cong dọc theo mép dưới. Ngoài ra, border-radius: 0 0 50% 50% / 0 0 80px 80px cho đáy hình elip đơn giản.
Đường cong có thể lõm vào trong không?
Có — Lõm sẽ uốn mép vào trong, để section phía dưới phồng lên chạm vào section này.
Đường cong polygon có đủ mượt không?
Có. Đường cong dùng nhiều điểm; ở kích thước thông thường, trông giống hệt đường cong SVG.
Tôi có thể cài Đường cong chia section như một ứng dụng web và dùng khi không có mạng không?
Có. Đường cong chia section 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.