CSS 裁剪路径生成器
从三角形、菱形、六边形或星形开始，以百分比调整坐标并复制 CSS clip-path。
选择预设会替换点列表。自由编辑前请选择“保留自定义点”。
预览颜色不包含在复制的 clip-path 声明中。
每行一个点，按 X, Y 输入 0 到 100 的百分比。使用 3 到 12 个点，首尾点自动连接。
预览
百分比相对于元素的边框盒计算。允许凹多边形；自交路径和边缘渲染可能因浏览器而异。需要支持旧浏览器时，请使用回退形状或未裁剪内容。
使用步骤
如何使用
- 选择常见多边形预设或保留自定义顶点。
- 编辑最多 12 个 X、Y 百分比顶点，并查看形状变化。
- 复制 CSS，并按目标元素和浏览器支持要求测试。
可编辑的百分比多边形
三角形、菱形、六边形和五角星可作起点。选择保留自定义顶点可编辑列表。每个非空行须含 0 到 100 的 X、Y，编辑器接受 3 到 12 个顶点。
渲染与支持边界
百分比相对于被裁剪元素的 border box。凹多边形有效；自交多边形的填充行为可能因浏览器不同，边缘抗锯齿也会变化。当前浏览器支持广泛，旧版可能不支持或有限；不要只依赖裁剪轮廓呈现重要内容。
常见问题
你可能还想知道
百分比相对于哪个框？
相对于元素 border box；裁剪前 50%、50% 是该框中心。
能创建凹形或自交形状吗？
支持凹多边形。自交路径可能因浏览器引擎而异；需要一致输出时请检查目标浏览器并使用较简单形状。
可以导出 SVG 或图像吗？
不可以，只生成 CSS clip-path 声明和本地预览。将 CSS 用于现有 HTML 元素；需要 SVG 路径时请用矢量工具。