SVG 形状分隔生成器
独立设置容器高度和起伏，预览320、768、1440像素布局，复制SVG或包含区块定位的HTML与CSS。
🔒 浏览器本地处理 · 不上传
容器高度决定 SVG 实际占用高度；起伏是轮廓高度占容器的百分比。贴底时匹配下一个区块颜色，贴顶时匹配上一个区块颜色。完整示例已包含所需 CSS。
响应式示例
选择形状，独立设置容器高度和起伏，再复制SVG或完整HTML与CSS。所有代码在浏览器本地生成。
把分隔线放进真实页面
容器高度决定分隔占用多少垂直空间；起伏决定形状在该空间里的变化幅度。起伏为0%时边界为直线，为100%时使用整个高度。改变页面宽度只会横向拉伸形状。
完整HTML与CSS示例已给正文保留空间。贴底时SVG位于上一个区块底部，填充色与下一区块一致；贴顶时位置与颜色关系反过来。把两段示例正文替换为自己的内容即可。
示例CSS限定在sc-shape-demo内。复制多个示例时，每个根元素保存自己的高度和颜色。若网站已有覆盖svg高度、section定位或外边距的全局规则，请在真实页面检查最终计算样式。
如何使用 SVG 形状分隔生成器？
- 1选择倾斜、曲线、弧形、三角或阶梯。
- 2设置容器高度（像素）与起伏（百分比），选择贴顶或贴底及水平镜像。
- 3选择分隔填充色；贴底匹配下一个区块，贴顶匹配上一个区块。
- 4在三个示例宽度检查结果，再复制SVG或完整HTML与CSS。
为什么用Shape CatSVG 形状分隔生成器？
- 容器高度与导出高度一致，起伏独立控制。
- 完整示例包含相邻区块、定位、留白及响应式CSS。
- 代码在浏览器本地生成，无需上传或账户。
常见问题
84px高度会导出多高的SVG？
SVG的height属性和默认CSS高度都是84px。起伏滑杆只改变轮廓，不改变这个盒子高度。
SVG与HTML加CSS有什么区别？
SVG只包含形状。HTML与CSS还包含两个相邻区块、定位与正文留白，可直接粘贴到网页。
为什么贴顶后相邻区块的示例颜色交换了？
贴顶时形状连接上一个区块，填充色应与它一致；贴底时连接下一个区块。
复制按钮不可用怎么办？
代码仍完整保留。复制失败时会选中下方代码，请按Ctrl+C或Command+C手动复制。
更新于 · Shape Cat团队