CSS 裁剪路径生成器
想用 CSS 轻松创建复杂形状？我们免费的 CSS 裁剪路径生成器让你可以直观设计并导出 clip-path 代码，支持 polygon、circle、ellipse 和 path() 函数。无论是斜切、星形、对话框还是自定义多边形，你都可以拖拽控制点、调整坐标，然后一键复制生产级代码。再也不用死记硬背语法或手动计算坐标，工具帮你搞定所有数学运算，专注于设计。非常适合落地页、Banner区域、图片遮罩和创意布局。
功能介绍
CSS clip-path 属性允许你在任何 HTML 元素上定义可见区域，区域外的内容会被裁剪掉。它是现代 CSS 中创建非矩形布局最强大的工具之一。与只能按矩形裁切的 overflow: hidden 不同，clip-path 支持复杂几何形状——任意顶点数的多边形、可调半径的圆形、任意角度的椭圆形，甚至通过 path() 函数使用 SVG 路径实现极致灵活性。 常用的 clip-path 值类型： • polygon() — 用一组 x,y 坐标点定义闭合形状。例如 polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) 生成菱形。 • circle() — 绘制一个可指定半径和圆心的圆。例如 circle(40% at 50% 50%)。 • ellipse() — 绘制指定两个半径的椭圆。例如 ellipse(60% 30% at 50% 50%)。 • inset() — 裁剪矩形区域并可选圆角。 • path() — 使用 SVG 路径字符串实现最灵活的形状。 所有主流浏览器（Chrome 55+、Firefox 54+、Safari 9+、Edge 79+）都已支持标准语法，不再需要 -webkit- 前缀。clip-path 可应用于图片、div、标题、SVG 元素等。结合 CSS 动画可以实现形状之间平滑变形的效果。
使用方法
- 在浏览器中打开 CSS 裁剪路径生成器，画布上会显示一个示例元素。
- 从工具栏选择预设形状——三角形、六边形、星形、箭头、菱形，或选择'自定义'从零开始。
- 在画布上拖拽控制点调整形状。控制点会吸附到网格以保持精确。点击边缘可添加新控制点，右键点击可删除。
- 调整全局设置：选择百分比或像素输出单位，切换填充规则（nonzero 或 evenodd），如需动画效果可设置 transform-origin。
- 从输出面板复制生成的 CSS 代码，包含 clip-path 属性和必要的浏览器前缀。粘贴到你的样式表或行内 style 属性中即可。
- 使用内置兼容性检查器测试各大浏览器支持情况，再配合 CSS transition 实现 clip-path 形状的平滑变形动画。
计算示例
输入: 多边形: 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
过程: 在坐标平面上映射5个点 → 依次连接 → 创建五边形
结果: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
输入: 圆形: circle(50% at 50% 50%)
过程: 定义半径50% → 圆心位于50%,50% → 生成椭圆路径
结果: clip-path: circle(50% at 50% 50%)
输入: 内嵌: inset(10% 20% 30% 40% round 12px)
过程: 计算4个偏移量 → 应用圆角 → 裁剪内容区域
结果: clip-path: inset(10% 20% 30% 40% round 12px)
相关搜索
相关搜索：css, clip-path, 形状, 多边形, path。
cssclip-path形状多边形path
常见问题
clip-path 和 overflow: hidden 有什么区别？
overflow: hidden 只能将内容裁切成矩形边框，无法实现斜切或多边形。而 clip-path 可以定义任意形状的可视区域——圆形、星形、箭头或数十个顶点的多边形。简单矩形裁剪用 overflow，复杂的非矩形必须用 clip-path。
clip-path 可以用于 CSS transition 或 keyframe 动画吗？
可以！在两个相同顶点数的形状之间，你可以用 CSS transition 或 @keyframes 实现动画变形。例如从三角形变形到另一个三角形就很流畅。如果起始和结束状态的顶点数量不同，浏览器会瞬间跳过渡，没有过渡效果。
clip-path 会影响点击事件和可访问性吗？
clip-path 只改变视觉显示，不改变 DOM 中的包围盒。点击事件、焦点矩形和屏幕阅读器区域仍按原始矩形盒处理。这是一个常见误区——看起来是菱形的元素实际上仍然占据完整的矩形区域用于指针事件。如果需要精确点击检测，建议用 SVG 的 clipPath 替代。
如何创建响应式 clip-path 以适应不同屏幕？
在 polygon()、circle() 或 ellipse() 中使用百分比坐标而非固定像素。百分比相对于元素边框计算，因此形状会按比例缩放。工具默认输出百分比单位，只要不切换到像素模式即可保持响应式特性。
clip-path 可以应用于背景图片和渐变吗？
完全可以。clip-path 应用于整个元素，包括其背景、background-image 和背景渐变。你可以在一个 div 上设置渐变背景再用 clip-path 裁切出六边形——渐变只会显示在裁剪区域内。这个技巧非常适合创建装饰性图片框或创意 Hero 区，无需外部图片编辑软件。