SVG / 章节

SVG形状分隔线：区块边缘和图层

生成八种SVG区块分隔线形状，可调整振幅、频率、高度、翻转、反转填充和最多三层图层。预览区块并复制SVG、CSS和HTML。

SVG形状分隔线：区块边缘和图层: 选择波浪、曲线、倾斜、三角形、箭头、锯齿、云朵或山峰边缘，调整其高度、振幅和重复次数，翻转或反转形状，并叠加最多三层图层。分隔线会适应任意页面宽度；你可以复制SVG、定位CSS或现成的HTML区块。完全在浏览器中本地运行，文件不会上传到服务器。

类别: 开发者工具
使用次数: 在浏览器中
费用: 免费·无需注册
可用性: 可直接使用

SVG形状分隔线本地处理

完全在浏览器中运行

部分预览

换一种风景。

两个部分之间的形状边缘。

SVG代码

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSS定位

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTML部分

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

使用下一部分的背景颜色来形成连续边缘。将底部分隔线移到顶部时，请垂直翻转。

闭合路径和坐标

SVG 2定义了closepath和三次路径命令：https://www.w3.org/TR/SVG2/paths.html。viewBox会将这些坐标映射到视口：https://www.w3.org/TR/SVG2/coords.html

形状来源

波浪形状使用与SVG Wave Generator和SVG Blob Generator相同的平滑曲线；其他轮廓则根据简单公式绘制。不包含第三方 artwork，因此您可以自由使用输出结果。

使用方法

选择形状，并调整其振幅、频率和高度。
设置图层、不透明度和颜色，然后选择区块边缘及所需的翻转方式。
复制SVG、定位CSS和区块HTML，或下载SVG。

隐私与限制

形状生成和下载完全在浏览器中运行。

常见问题

如何让边缘与另一个区块自然融合？

将另一个区块的背景色用作分隔线填充色。CSS会为分隔线预留空间，并将其绝对定位在所选边缘。

这与波浪工具有什么不同？

此工具增加了另外七种形状、反转功能和区块HTML。现有的SVG Wave Generator提供随机波浪和更多波浪专用控制项。SVG Blob Generator则用于创建独立的有机形状。

反转功能有什么作用？

反转会让路径朝顶部而不是底部闭合，同时保持分隔边缘的位置不变。垂直翻转则会反射整个形状。

免费工具·使用在浏览器中次·无需账户