CSS 分段分割线生成器
生成装饰性段落边界分割线 — 斜线、曲线、三角形、箭头/分割、书页卷曲或波浪云 — 从选择的形状和颜色。复制 SVG、CSS background-image 代码片段或即用型 HTML 块。完全在浏览器中运行。
输入
对角边缘下降的距离，以高度的百分比表示。
尺寸
变换
填充
背景
输出
SVG 代码
预览
你的分割线将在这里显示。
CSS 背景
HTML 代码片段
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "slant",
"slantDepth": "50",
"width": "1200",
"height": "200",
"fillColor": "#464aff",
"fillOpacity": "100",
"bgColor": "#f5f5f5"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-section-divider-generator` tool (CSS Section Divider Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-section-divider-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 分段分割线生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS 分段分割线生成器构建你在现代落地页中看到的装饰性分段边界 — 分割英雄
部分、页脚和内容块 — 斜线、单曲线、三角形、箭头/分割凹口、卷曲书页角或
一排波浪云。它以三种方式为你提供结果：原始 SVG、CSS background-image
代码片段和即用型 HTML 块。每个形状都是真实的矢量几何，因此在任何大小
下都保持清晰。
如何使用
- 选择一个 形状 — 斜线、曲线、三角形/楔形、箭头/分割、书页卷曲或云朵。
- 调整该形状的自有控件（斜线深度、曲线深度、峰值位置和高度、凹口深度、 卷曲大小或凸起数量和高度）。
- 设置画布的 宽度 和 高度。
- 垂直翻转 形状（使其从分段顶部悬挂而不是位于底部）或 水平翻转 （将斜线、峰值和书页卷曲镜像到另一侧）。
- 选择 填充颜色 和不透明度，以及 背景颜色。复制你需要的任何输出 — 预览会随你的操作而更新。
三个输出
- SVG 代码 — 一个自包含的
<svg>，你可以直接放入你的标记或保存为.svg文件。背景颜色烘焙为<rect>，因此文件在任何地方打开时看起来都一样。 - CSS 背景 — 相同的形状 URL 编码为
background-image: url("data:image/svg+xml,…")规则，准备好附加到任何元素作为装饰分割线。 - HTML 代码片段 — 带有内联 SVG 的
<div>包装器，用于粘贴到页面中而不必 触及你的样式表。
我如何将分割线放在分段顶部而不是底部？
启用 垂直翻转。默认情况下，每个形状被绘制为位于其框底部边缘；翻转会 镜像填充区域，使相同的形状从顶部边缘悬挂 — 不需要单独的"位置"设置。
这些形状会无模糊地缩放吗？
是的。一切都是矢量路径数据，带有 preserveAspectRatio="none"，因此形状
会拉伸以填充你放置它的任何宽度 — 从手机到超宽显示器 — 不会丢失质量。
如果我想要波浪形分割线怎么办？
此工具涵盖直线和曲线形状族。对于波浪形、波状分割线 — 正弦、锯齿形、圆润 山丘、分层波浪或有机斑点 — 请使用 SVG 波浪生成器， 其姊妹工具基于相同的 SVG/CSS/HTML 输出协定构建。
隐私
生成器完全在你的浏览器中运行。你的颜色、尺寸和所有其他设置都留在你的设备上 — 没有任何东西被上传，也没有形状被发送到服务器。
section divider generatorwave divider alternativeslant divider csspage curl svgcloud divider svghero shape dividersvg background shapefooter divider css