ZeroTool Workbench
CSS Clip-Path 生成器
可视化生成 CSS clip-path 形状，拖拽控制点创建多边形、圆形、椭圆和内嵌形状，实时预览，一键复制 CSS。免费在线工具。
使用方法
- 通过选项卡选择形状类型：多边形、圆形、椭圆或内嵌。
- 多边形模式：拖拽预览区的白色控制点调整顶点位置，或在顶点列表中输入精确的 X/Y 值。使用预设按钮（六边形、星形、箭头、菱形、三角形）作为起点，按需添加或删除顶点。
- 圆形模式：通过滑块调整半径和圆心位置。
- 椭圆模式：分别设置水平半径、垂直半径和圆心位置。
- 内嵌模式：设置各边的偏移量和可选的圆角。
- 切换色块和图片背景，测试裁剪元素在不同背景下的效果。
- 点击复制按钮获取生成的 CSS。
生成 CSS 说明
生成的代码为 .element 类设置 clip-path 属性。可将此属性直接应用于任意元素——img、div 或伪元素。所有坐标均使用相对于元素自身宽高的百分比，因此形状会随元素尺寸自动缩放。
常见应用场景
CSS clip-path 常用于创建非矩形图片裁剪、对角线分割区域、装饰性英雄区形状、形状显示动画、图标蒙版以及滚动触发的形变效果。多边形模式尤为灵活——最多支持 12 个顶点的任意凸形或凹形多边形，无需 SVG 或 Canvas 即可实现。
FAQ
什么是 CSS clip-path？
CSS clip-path 属性将元素裁剪为指定形状，隐藏边界外的内容。支持的形状包括 polygon()、circle()、ellipse() 和 inset()。它经过硬件加速，可应用于任意 HTML 元素，包括图片、div 和伪元素。
如何拖拽多边形顶点？
切换到多边形选项卡，在预览区域拖动白色圆形控制点即可重新定位顶点。也可以在右侧顶点列表中直接输入精确的百分比值。点击「+ 添加顶点」按钮新增顶点，点击「×」删除顶点。
polygon() 中的百分比含义是什么？
每个顶点由两个百分比表示：X% 为距元素左边缘的比例，Y% 为距元素顶部边缘的比例。50% 0% 代表顶部中心，100% 100% 代表右下角。超出 0–100% 范围的值也是合法的，会裁剪到元素边界之外。
inset() 函数的作用是什么？
inset() 通过指定每条边的偏移量（上、右、下、左）定义矩形裁剪区域。可选的 round 关键字为裁剪矩形的角添加圆角。适合制作软边裁剪效果或带视觉内边距的裁剪区域。
clip-path 可以用 CSS 过渡动画吗？
可以，但要求起始和结束值使用相同的形状函数，且顶点数相同。例如，顶点数相同的两个 polygon() 值之间，或两个 circle() 值之间，可以使用 transition: clip-path 0.3s ease 实现平滑过渡。