Trình tạo đường phân chia CSS

Các đường phân cách đơn giản

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Chuyển tiếp mục bằng cạnh nghiêng

Mẹo dùng clip-path:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

Góc dưới bên trái được kéo lên 48px, tạo thành một cạnh nghiêng đường chéo. Để chuyển tiếp một cách liền mạch, phần tiếp theo cần bắt đầu ngang với cạnh này, không được có khoảng trống trắng.

Đối với đường chéo đi theo hướng ngược lại, hãy đảo vị trí góc dưới được nâng lên. Đối với các đường rãnh hoặc đường hình chữ Z, cần thêm thêm các đỉnh.

Đường phân chia dạng sóng bằng SVG

SVG là phương pháp sạch nhất để tạo các đường cong tự nhiên:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none" cho phép định dạng SVG kéo dài đến toàn bộ chiều rộng của container, bất kể kích thước ban đầu của hình ảnh. margin-top: -1px loại bỏ khe hở nhỏ mà một số trình hiển thị có thể để lại.

Thư viện đường phân chia thường dùng

Các đoạn mã hữu ích:

Những mẹo nhỏ

• Khớp mép nối: Nền của đường phân chia (màu tô SVG hoặc màu của mục nghiêng) phải trùng khớp chính xác với nền của mục tiếp theo; chỉ cần lệch màu 1px là hiệu ứng hỏng.
• Tránh các đường cong gắt trên màn hình hẹp: Một con sóng trông thanh lịch ở 1440px có thể trở thành đường sin bị bẹp ở 360px. Hãy giảm biên độ trên di động bằng media query, hoặc dùng một đường SVG khác.
• Đừng xếp chồng nhiều đường phân chia: Mỗi ranh giới mục chỉ cần một mép nối là đủ.
• Hiệu suất: Đường phân chia SVG nội tuyến gần như không tốn tài nguyên; trong khi đường phân chia dựa trên hình ảnh lại tốn thêm một yêu cầu mạng. SVG nội tuyến chiếm ưu thế.