SVG 波浪分隔实战:用波浪曲线让区块过渡更自然

一个落地页从彩色 hero 区往下走到白色内容区,如果两块之间只有一条水平直线,视觉上会显得很硬,像被刀切开。现在多数 SaaS 站点的做法,是在接缝处放一条平滑的波浪曲线,让上面的色块顺着曲线"流"进下面那块。这篇文章把这件事拆开讲:波浪是怎么画出来的,振幅和层数各管什么,导出的 SVG 长什么样,以及它和直角分隔到底差在哪。

波浪分隔到底是什么

波浪分隔本质是一个填充形状,不是一条线。它横跨区块的整个宽度,上边缘是一条起伏的曲线,下边缘和左右两边沿着 viewBox 闭合,中间填上颜色。把这个形状贴在区块的底部,填充色跟上方区块一致,曲线之下的那块"多出来的颜色"就盖住了接缝,让色块看起来是顺着波浪结束的。

关键在于曲线要平滑。如果你直接把采样点用直线连起来,得到的是锯齿折线,很难看。真正的做法是用三次贝塞尔曲线,并且让每段曲线的两个控制柄保持水平:控制柄落在相邻两个锚点中点的 x 上,y 与各自锚点齐平。这样曲线会从一个波峰平滑滑到下一个,没有任何尖角。一段典型的 path 大概是 M0,80 C60,80 90,20 150,20 C210,20 240,80 300,80 L300,120 L0,120 Z 这种形态:C 命令带着水平控制柄穿过波峰波谷,末尾三个 L 和 Z 把右边、底边、左边收回去闭合成填充区。

振幅与层数:两个最该先调的参数

振幅决定波浪有多高,也就是波峰高出中线、波谷低于中线的幅度。低振幅是一条几乎贴着直线的浅弧,适合企业风的冷静收尾;高振幅起伏明显,更活泼也更抢眼。和振幅配套的还有一个不规则度:0% 时每个波峰一样高,像整齐重复的图案,100% 时波峰高低各不相同,看着更自然有机。企业站我一般低振幅配低不规则度,做小项目或活动页才把两个都拉高。

层数是另一个味道开关。把层数设成 3 或 4,工具会用同一个品牌色的几种深浅,叠出几层半透明波浪,每层用更低的透明度、错开的种子放在上一层后面,波峰故意不对齐,就是 SaaS 定价页页脚那种"海洋"层叠视差效果。单层干净利落,多层有纵深,按页面气质选。

一个真实例子:页脚的层叠波浪

说个我自己做过的。给一个工具站的页脚做收尾,我选了层数 4、渐变填充,主色是品牌的那支蓝。生成之后导出的是一段独立 SVG:viewBox 固定,里面四条 <path>,从下到上透明度递减,每条 path 都带 preserveAspectRatio="none",这样横向拉满整页宽度也不会留黑边。我把这段 SVG 直接当页脚背景图贴上去,再在 CSS 里给每层 transform: translateX 配不同速度,鼠标滚动时层与层之间产生轻微错位,假装出景深。导出形态就是这么朴素:几条闭合的贝塞尔 path 加颜色,没有任何脚本依赖,丢进 HTML 就能用。如果想要更省事,也可以让工具导出一段 data-URI 的 CSS,把整条波浪塞进 .wave-divider 类的 background-image,连多塞一个 SVG 节点都省了。

用作 Hero 底部还是页脚顶部

同一条波浪翻不翻转,用法完全不同。关掉翻转时,波浪是彩色区块的底边,弧线向下沉进下方较浅的块,这是 hero 区收尾最常见的样子。打开翻转,形状垂直镜像,弧线改成向上拱,适合放在一条彩色带的顶部,让 hero 文字压在带子上。最妙的是,因为形状由种子驱动,你可以用同一个种子做出翻转和不翻转两个版本,分别放在一条彩色带的顶边和底边,得到一条上下完全对称的丝带。多区块的长页面也别每条接缝都用同一条波浪,锁定波浪数和层数,手动把种子递增一两位,每个种子产出调性一致但不雷同的分隔,既不机械又有秩序。

波浪分隔和直角分隔的取舍

直角分隔就是一条水平直线,或者一个生硬的色块边界。它不是不好,信息密集的后台、数据表格、文档站点,用直线反而干净利落,不抢内容。波浪分隔的价值在营销页:它柔化了色块边界,把视线顺势往下带,情绪上更亲和。代价是它会占一点视觉重量,内容很严肃时反而显得轻浮。我的经验是,营销落地页、产品介绍页用波浪,工具内页和控制台用直角。还有一个常见坑要提醒:贴波浪时填充色一定要配上方区块,底部分隔的波浪是上方色块向下沉的尾边,手误配成下方颜色,效果就整个反了;另外贴在 bottom: 0 时给个 margin-bottom: -1px 的负外边距,盖掉某些缩放级别会冒出来的 1px 亚像素缝。

想动手试,可以直接用 SVG 波浪分隔生成器调波浪数、振幅、层数和种子,实时看效果再导出。如果你要的是不规则的有机色块而不是规整的波浪,那条路更适合 SVG 形状生成器,两个工具搭着用,落地页的留白和分隔基本就齐了。

Made by Toolora · Updated 2026-06-13