Developer Tools
Design Tools
Web UtilitiesCSS 剪切路径生成器
使用拖放可视化编辑器创建 CSS clip-path 多边形、圆形和椭圆。使用箭头、三角形和星形等常见形状的预设，立即复制 CSS 代码。
点 1
点 2
点 3
点 4
CSS 属性
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}CSS 值
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)相关工具
关于此工具
工作原理
- 选择形状类型：多边形、圆形或椭圆形
- 在预览画布上拖动控制点以重塑剪切路径
- 使用滑块和输入框精确调整设置
- 复制生成的 CSS clip-path 值以在样式表中使用
- 使用箭头、三角形和星形等常见形状的预设
- 预览应用于实际图像或纯色背景的剪切路径
常见使用场景
- 为英雄区域创建非矩形图像裁剪
- 构建对角线或人字形区域分隔线
- 设计多边形个人头像或徽章
- 为图库创建几何图像遮罩
- 构建箭头形状的行动号召按钮
- 设计自定义形状的 UI 卡片和工具提示
常见问题
什么是 CSS clip-path？
CSS clip-path 属性允许您为元素定义裁剪区域——只有区域内的部分可见，区域外的部分隐藏。它支持 polygon()、circle()、ellipse() 和 path() 等形状，让您无需任何图像编辑软件即可创建非矩形元素、对角分隔线和几何图像遮罩。
如何在预览中拖动控制点？
选择多边形形状类型后，预览画布上每个顶点会出现蓝色圆形手柄。单击并拖动任意手柄来重新定位该点。拖动时 CSS 输出会立即更新。
X 和 Y 百分比是什么意思？
clip-path 多边形坐标以元素宽度和高度的百分比表示。0% 0% 是左上角，100% 0% 是右上角，100% 100% 是右下角，0% 100% 是左下角。
如何添加或删除多边形点？
使用「+ 添加点」按钮在中心 (50% 50%) 添加新控制点，然后拖动它或编辑其 X/Y 值。要删除点，请点击旁边的「− 删除」按钮。多边形至少需要 3 个点。
有哪些预设形状可用？
该工具包含 12 个多边形预设：三角形、菱形、右箭头、左箭头、五边形、六边形、星形、人字形、左斜、右斜、斜角和凹槽。
圆形 clip-path 如何工作？
选择圆形形状类型会生成 clip-path: circle(r% at cx% cy%) 值。半径滑块控制圆的大小，中心 X/Y 滑块移动圆的中心点。
圆形和椭圆形有什么区别？
圆形 clip-path 取一个半径，产生完美圆形的裁剪形状。椭圆 clip-path 取单独的 X 半径 (rx) 和 Y 半径 (ry) 值，允许创建椭圆形状。
如何复制生成的 CSS？
CSS 输出部分有两个复制按钮。「复制 CSS」复制包含 .element 选择器的完整 CSS 规则。「复制值」仅复制 clip-path 值，可粘贴到现有规则中。
clip-path 是否在所有浏览器中都受支持？
CSS clip-path 基本形状（polygon、circle、ellipse）在所有现代浏览器（包括 Chrome、Firefox、Safari 和 Edge）中都得到良好支持，不需要供应商前缀。
可以为 clip-path 形状添加动画吗？
可以！CSS clip-path 可以在相同类型、相同点数的形状之间平滑过渡和动画。例如："transition: clip-path 0.4s ease"。
如何将 clip-path 用于区域分隔线？
将多边形 clip-path 应用于全宽区域元素，可创建对角线、人字形或波浪形的页面区域过渡。使用左斜或右斜预设作为起点。
预览背景图像选项是什么？
将预览背景切换为「图像」时，预览会填充渐变（靛蓝到粉红）而不是纯色。这有助于您看到 clip-path 应用于照片或丰富背景时的效果。