CSS clip-path 生成器
通过圆形、椭圆、多边形、内嵌或圆角内嵌预设和数字输入框生成 CSS clip-path，实时预览并复制可直接使用的属性。
正在加载工具…
CSS clip-path 生成器 — 选择一种裁剪形状——圆形、椭圆、多边形、内嵌或圆角内嵌——用简单的数字输入框调整百分比，实时预览会精确显示元素被如何裁剪。完整的 clip-path 声明会自动生成，并随输入即时更新。一切都在浏览器中运行，你输入的内容绝不会被上传。
CSS clip-path 生成器 是什么？
CSS clip-path 生成器是一款免费的 CSS clip-path 属性可视化编辑器，专为想把元素裁剪成非矩形形状的前端开发者和设计师打造。从下拉菜单中选择预设——带半径和中心点的 circle() 与 ellipse()、可添加任意多个顶点的 polygon()、带四条边偏移的 inset()，或带圆角半径的圆角 inset() 变体。每个参数都是通过数字输入框填写的百分比，棋盘格背景的预览框会实时显示裁剪后的形状。完整的 clip-path CSS 会自动生成供你复制。可用于遮罩图片、制作对角分隔线、生成六边形头像，或裁出对话气泡形状，无需手动数坐标。
如何使用 CSS clip-path 生成器
- 从预设下拉菜单中选择形状：圆形、椭圆、多边形、内嵌或圆角。
- 对于圆形或椭圆，设置半径（或 X/Y 半径）以及中心 X/Y 位置（百分比）。
- 对于多边形，编辑每个顶点的 X 和 Y 百分比；点击「添加点」可增加顶点，通过编辑数值来调整顺序。
- 对于内嵌或圆角，设置上、右、下、左偏移；圆角还需设置一个圆角半径。
- 随着输入查看实时预览裁剪元素。
- 复制生成的 clip-path CSS 并粘贴到样式表中。
示例
圆形头像遮罩
输入
预设 圆形，半径 50%，中心 50% 50%
输出
clip-path: circle(50% at 50% 50%);
三角形多边形
输入
预设 多边形，点 (50,0) (100,100) (0,100)
输出
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
圆角内嵌边框
输入
预设 圆角，四边内嵌 10%，圆角半径 20%
输出
clip-path: inset(10% 10% 10% 10% round 20%);
常见问题
- clip-path 有什么用？
- CSS clip-path 属性会把元素裁剪为一个基本形状，只保留形状内部区域可见。它非常适合制作圆形头像、对角分割、六边形网格、图片遮罩和对话气泡——而且无需额外的图片或 SVG 文件。
- 多边形预设是怎么工作的？
- polygon() 通过按顺序连接一组 X/Y 顶点来绘制形状。编辑每个点的百分比值，用「添加点」插入更多顶点；最后一个点会自动连回第一个点。系统至少保留三个点以保证形状有效。
- 为什么用百分比？
- 百分比让裁剪随元素缩放，因此同一个 clip-path 在任何尺寸下都有效。0% 是元素框的左边或上边，100% 是右边或下边。
- 圆角预设增加了什么？
- 圆角预设使用带 round 圆角半径的 inset()，生成四边向内裁剪并带圆角的矩形——适合柔和的框式裁剪，这是普通 border-radius 无法与内嵌裁剪组合实现的。
- 我的数据会被发送到任何地方吗？
- 不会。生成器完全在你的浏览器中通过 JavaScript 运行——你的形状数值绝不会离开设备，因此既能保护隐私，页面加载后甚至还能离线使用。