不喜欢广告？ 去 无广告 今天
CSS Clip-Path 生成器
颜色开发人员
广告 · 消除？
广告 · 消除？
指导
CSS Clip-Path 生成器
使用直观的拖放编辑器以可视化方式创建 CSS clip-path 形状。构建多边形、圆形、椭圆和内嵌形状，然后将生成的 CSS 直接复制到您的样式表中。
如何使用
选择一种形状类型或从预设模板开始。拖动控制点以在预览画布上直观地调整形状。CSS clip-path 代码会在您编辑时实时更新。对结果满意后，复制生成的 CSS 代码或导出为 SVG。
特征
- 可视化拖放编辑器 – 通过直接在画布上移动控制点来创建形状
- 多种形状类型 – 多边形、圆形、椭圆和内嵌
- 预设模板 – 从三角形、星形、箭头等常见形状开始
- 撤销和重做 – 支持完整的历史记录，实现无损编辑
- 吸附到网格 – 使用可配置的网格吸附进行精确的点放置
- SVG 导出 – 将您的形状下载为 SVG 文件
- 实时 CSS 输出 – 即时复制生成的 clip-path 属性
广告 · 消除？
常问问题
-
什么是 CSS clip-path 及其工作原理？
CSS clip-path 定义了一个裁剪区域，该区域决定了元素的哪些部分可见。clip-path 形状之外的所有内容都将被隐藏。它支持基本形状（圆形、椭圆、内嵌、多边形）和 SVG 路径定义。与仅裁剪到矩形边界的 overflow:hidden 不同，clip-path 可以创建复杂的非矩形可见区域，以实现创意布局和视觉效果。
-
clip-path 和 CSS 蒙版之间有什么区别？
Clip-path 创建一个硬边缘——像素根据其是否落在定义的形状内，完全可见或完全隐藏。CSS 蒙版使用图像或渐变来控制透明度，允许使用柔和的边缘和部分透明度。Clip-path 对于几何形状更简单、性能更好，而蒙版通过渐变和 Alpha 通道提供更具艺术性的控制。
-
CSS 多边形坐标如何工作？
Clip-path 中的多边形坐标使用相对于元素边界框的百分比或长度值。每个点都定义为一个 x,y 对，其中 0% 0% 是左上角，100% 100% 是右下角。点按顺序连接以形成形状。例如，polygon(50% 0%, 100% 100%, 0% 100%) 创建一个三角形。形状通过将最后一个点连接回第一个点来自动闭合。
