CSS Clip-Path Generator

关于本工具

CSS Clip-Path生成器为四种形状类型创建clip-path值：circle()、ellipse()、inset()和polygon()。clip-path定义元素的可见区域，形状外的部分被隐藏。

无需SVG文件即可创建创意布局、图片遮罩和英雄区域形状。所有参数实时更新预览。

使用方法

1. 选择形状类型：circle、ellipse、inset或polygon。
2. 调整滑块设置形状参数。
3. 对于多边形，从列表中选择预设形状。
4. 调整设置时实时预览会更新。
5. 点击复制将CSS复制到剪贴板。

使用场景

英雄区域使用对角线或曲线clip-path作为视觉分隔。个人图片使用circle()。按钮悬停效果使用clip-path动画。

常见问题

• clip-path影响可点击区域吗？ — 是的，被裁切的区域不可点击。应用于交互元素时请注意。
• 可以为clip-path添加动画吗？ — 可以。具有相同顶点数的两个多边形形状之间可以过渡和动画。
• 所有浏览器都支持clip-path吗？ — 是的，所有现代浏览器都完全支持。