CSS 分隔线生成器

简单线条分隔线

/* 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;
}

斜角版块过渡

clip-path 技巧：

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

左下角向上抬高 48px，形成对角斜面。为实现平滑过渡，下一版块应紧贴斜面开始，不留白色间隙。

若希望对角线方向相反，则调换被抬起的底角；若要做出缺口或锯齿形，则增加更多顶点。

SVG 波浪分隔线

SVG 是绘制有机曲线最简洁的方法：

<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"可使 SVG 延伸至容器宽度，不受源尺寸限制；margin-top: -1px则能消除部分渲染器留下的发丝间隙。

常用分隔线库

实用代码片段：

小贴士

• 接缝匹配：分隔线的背景色（SVG 填充色或斜角版块颜色）必须与下一版块的背景色完全一致；哪怕只有 1px 的色差也会破坏整体效果。
• 窄屏上避免使用过陡的曲线：在 1440px 下显得优雅的波浪，在 360px 时可能像被压扁的正弦曲线。可通过媒体查询在移动端降低振幅，或换用不同的 SVG 路径。
• 不要叠加多条分隔线：每个版块边界只需一条接缝即可。
• 性能：内联 SVG 分隔线几乎不占资源；而基于图像的分隔线会产生一次网络请求。内联 SVG 更胜一筹。