Cách dùng Section nghiêng CSS
- Bản xem trước bắt đầu với cạnh dưới nghiêng. Chọn Both để có dải nghiêng, hoặc Top.
- Dùng Flip horizontally để đổi hướng nghiêng.
- Đặt độ sâu cắt theo px (góc cố định) hoặc vw (co giãn theo màn hình).
- Sao chép CSS.
Section nghiêng mà không cần skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) làm nghiêng cạnh dưới của section trong khi văn bản bên trong vẫn thẳng — khác với transform: skewY() vốn làm nghiêng cả nội dung. Kéo section kế tiếp lên dưới đường nghiêng bằng margin âm để nền của nó lấp kín khoảng trống.
Các kiểu cạnh khác — cong, mũi tên, sóng và răng cưa — có trong công cụ Section Divider Generator.
Cũng được tìm dưới tên: css section chéo, css background nghiêng, css skew section, css diagonal divider, clip-path css nghiêng, hero section nghiêng css, tạo section chéo css.
Các công cụ dùng kèm tốt với Section nghiêng CSS
- Đườ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.
- 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.
- Tạo sóng SVG — Thiết kế đường phân cách section dạng sóng cho landing page: thêm hoặc xóa sóng (tối đa 6, mỗi sóng có màu, độ mờ và hình dạng riêng), chỉnh số đỉnh, chiều cao và độ mượt, chọn màu và đặt sóng ở phía trên hoặc phía dưới.
- 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 để nghiêng cả đầu và cuối của section?
Chọn cạnh Both: polygon cắt phần trên và dưới song song, tạo thành dải nghiêng — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Nên dùng skewY hay clip-path?
clip-path. skewY làm nghiêng cả chữ và hình ảnh bên trong section, nên bạn phải skew ngược lại phần nội dung; clip-path chỉ cắt cạnh.
Làm sao giữ góc nghiêng giống nhau trên điện thoại?
Dùng độ sâu cắt theo vw: đường cắt co giãn theo chiều rộng màn hình nên góc luôn giữ nguyên ở mọi kích thước.
Tôi có thể cài Section nghiêng CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Section nghiêng CSS 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.