clip-path 生成器

如何使用

1. 选择形状函数：polygon、circle、ellipse 或 inset。
2. polygon 可直接编辑顶点：每个顶点是空格分隔的 x 与 y，顶点之间用逗号分隔，如 50% 0%, 100% 100%, 0% 100%。
3. 点预设可载入常见多边形：三角形、梯形、菱形、五边形、六边形、星形、箭头、V 形、对话气泡。
4. circle 设半径与中心；ellipse 设两个半径与中心；inset 设四条边与可选圆角。
5. 预览方块套用同一份 clip-path 实时更新，下方显示当前值。
6. 从输出卡片复制 CSS。

常见用途

• 版块分隔：页面各section 之间用斜边或箭头形色带。
• 卡片与图片遮罩：把照片裁成六边形、星形或对话气泡。
• 缎带与角标：价格表、功能亮点用 V 形。
• 头像框：circle/ellipse 裁剪，不用 border-radius 技巧。
• 教学 clip-path：直观看到每个顶点对应盒子的哪个位置。

为何保证隐私

顶点与半径在本页面内解析并重新序列化成 CSS 字符串，不上传任何数据，工具可离线使用。

常见问题

问：工具能生成哪些形状？ 答：可编辑顶点的 polygon()、circle()、ellipse()，以及带可选圆角的 inset()。预设覆盖三角形、梯形、菱形、五边形、六边形、星形、箭头、V 形、对话气泡。

问：接受哪些顶点写法？ 答：每个顶点是空格分隔的 x 与 y，顶点间用逗号分隔；取值可以是百分比或 px、em、rem、vw、vh 等长度；多边形需要 3 到 20 个顶点。工具会检查语法并指出第一处问题。

问：预览是最终效果吗？ 答：是。预览是套用同一份 clip-path 的真实元素，背景为渐变。百分比相对预览框计算，贴进尺寸不同的元素时结果会变。

问：为什么输出里有 -webkit- 一行？ 答：现代浏览器已支持无前缀的 clip-path 基础形状，保留前缀行是为了兼容旧版 Safari 与 Android，无副作用。