UD5工具箱
快速开始（3 步上手）
即使您是第一次使用 Clip-Path 工具，也可以在 30 秒内生成您的第一个裁剪路径代码。
第 1 步：选择裁剪模式
打开工具页面后，您会在顶部看到四个裁剪模式按钮：多边形（Polygon）、圆形（Circle）、椭圆（Ellipse）和内缩（Inset）。根据您的需求选择相应的模式。对于大多数创意布局场景，多边形模式是最常用的选择。
第 2 步：编辑裁剪形状
在画布区域，您可以看到一个默认的矩形裁剪区域。对于多边形模式，您可以：点击画布添加新的顶点、拖拽已有顶点调整位置、右键点击顶点删除它。对于圆形和椭圆模式，可以通过拖拽控制点来调整半径和位置。所有调整都会实时反映在右侧的预览区域中。
第 3 步：复制生成的代码
当您对裁剪效果满意后，查看右侧代码面板中自动生成的 CSS 代码。点击「复制代码」按钮即可将完整代码复制到剪贴板，然后粘贴到您的样式表中使用。
使用预定义形状
如果您需要快速创建常见形状，可以使用预定义形状功能。点击工具栏中的「预设形状」按钮，展开形状选择面板。面板中包含数十种常用形状模板，分为「基础形状」「装饰形状」「箭头与指示」「创意形状」等类别。点击任意形状即可立即应用到画布上。应用预设形状后，您仍然可以自由调整各个顶点的位置。预设形状是一个很好的起点，能帮您节省大量时间。
高级参数调整
在代码面板下方，您可以看到当前裁剪路径的详细参数信息。对于多边形模式，每个顶点的 X 和 Y 坐标都以百分比形式显示，您可以直接修改数值来精确定位。对于圆形模式，可以手动输入圆心的 X/Y 坐标和半径百分比。对于椭圆模式，可以分别设置水平和垂直半径。对于内缩模式，可以设置四个方向的内缩值和圆角半径。这些数值调整对于需要精确匹配设计稿的场景非常有用。
自定义预览背景
默认情况下，预览区域使用纯色背景显示裁剪效果。您可以点击「自定义预览」按钮，切换预览背景为：纯色（可选任意颜色）、渐变色、网格线、或者自定义图片。使用图片背景时，可以更直观地看到裁剪路径对实际内容的裁剪效果。这对于设计头像裁剪、卡片布局等场景特别有帮助。
实际应用案例
案例一：创建菱形图片裁剪
选择多边形模式，在画布上设置四个顶点：顶部中间（50%, 0%）、右侧中间（100%, 50%）、底部中间（50%, 100%）、左侧中间（0%, 50%）。将图片元素应用生成的 clip-path 代码，即可实现菱形裁剪效果。这种效果常用于作品集展示、团队成员介绍等场景。
案例二：创建圆形头像
切换到圆形模式，将圆心设置为（50%, 50%），半径设置为 50%。应用代码后，任何矩形图片都会被裁剪为完美的圆形。这是最常用的裁剪效果之一，广泛应用于用户头像、产品图片等场景。
案例三：创建波浪形分区
在多边形模式下，沿着元素底部边缘添加多个顶点，交替设置不同的 Y 坐标值（如 85% 和 100%），形成波浪形的底边。这种效果在着陆页的分区设计中非常流行，能让页面看起来更有设计感和流动感。
使用注意事项
- 确保生成的 clip-path 值包含
-webkit-前缀以兼容 Safari 浏览器 - clip-path 裁剪的是元素的可视区域，不会影响元素的实际占位空间（布局尺寸不变）
- 多边形的顶点建议按顺时针或逆时针顺序排列，避免自交叉导致的渲染异常
- 对于复杂形状，建议先使用预设形状作为起点，再进行微调
- 在使用 clip-path 配合过渡动画时，确保新旧形状的顶点数量一致，否则动画效果可能不理想