Cách dùng Tạo đường chia section CSS
- Chọn hình dạng: góc nghiêng, mũi tên, khuyết, cong, lõm, góc cong, sóng, zigzag, răng cưa hoặc bậc thang.
- Chọn cạnh cần cắt: dưới, trên hoặc cả hai (cắt cả hai cạnh với góc nghiêng sẽ cho dải nghiêng kinh điển).
- Đặt độ sâu cắt. Dùng px hoặc vw để góc nghiêng không đổi khi section cao thêm; với sóng và zigzag, hãy đặt số lần lặp.
- Sao chép CSS vào section của bạn. Quy tắc tùy chọn sẽ kéo section kế tiếp lên dưới phần cắt để không còn khoảng trống.
Cách hoạt động của section nghiêng
Section vẫn giữ hình chữ nhật thông thường; clip-path: polygon() chỉ ẩn một tam giác (hoặc đường cong, hoặc zigzag) dọc theo cạnh của nó. Mỗi điểm trên cạnh cắt dùng calc(100% - 80px), nên phần cắt luôn sâu 80 px, dù là hero ngắn hay section dài, và góc nghiêng không đổi khi nội dung tăng lên.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }Quy tắc thứ hai đẩy section kế tiếp lên nằm dưới phần cắt, nên nền của nó, thay vì nền của trang, sẽ lấp đầy khoảng trống nghiêng. z-index: 1 giữ section đã cắt ở trên cùng. Đường cong, sóng và răng cưa được vẽ bằng đa giác với nhiều điểm, và mọi trình duyệt hiện đại đều hiển thị mượt mà.
clip-path so với skew và SVG
transform: skewY() cũng làm nghiêng section nhưng làm biến dạng cả nội dung, nên bạn phải bù lại cho từng phần tử con. Đường chia SVG cần thêm một phần tử. clip-path cắt chính section, bao gồm nền, gradient và ảnh, chỉ với một quy tắc. Với các đường sóng hữu cơ nhiều lớp, hãy dùng SVG Wave Generator; để làm mờ dần cạnh thay vì cắt, hãy dùng CSS Mask Generator.
Cũng được tìm dưới tên: css section divider, tạo section nghiêng css, css section nghiêng, css clip-path section, css section cong, css zigzag border, css skew section, css shape divider.
Các công cụ dùng kèm tốt với Tạo đường chia section CSS
- 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.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo SVG Blob — Tạo hình blob hữu cơ, mượt mà cho nền hero, avatar và minh họa.
- 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.