CSS clip-path 生成器，免费

使用方法

1. 选择形状类型：多边形、圆形、椭圆或 inset（可选圆角的矩形）。
2. 拖动控制点：在预览区移动形状的手柄，精确自定义遮罩区域。
3. 复制 CSS：生成的 clip-path 属性值可直接粘贴到您的样式表中。

为什么使用 CSS clip-path 生成器？

CSS clip-path 通过遮罩定义区域之外的内容来创建非矩形形状。常用于斜角分节符、六边形图像裁剪、自定义按钮形状、创意悬停效果以及遮罩式图像展示。手写多边形 clip-path 坐标需要计算每个顶点的百分比 ， 既繁琐又难以可视化。这款交互式生成器让您可视化地拖动控制点，并即时得到精确的 CSS 值。

功能特性

• 多边形编辑器：添加、移动和删除顶点以创建任意形状。
• 内置预设：对角线、雪佛龙、六边形、星形、三角形及其他常见形状。
• 圆形与椭圆模式：可视化控件，制作圆形或椭圆遮罩。
• Inset 模式：创建矩形遮罩，每个角都可单独设置 border-radius。
• 遮罩区域预览：以高亮方式显示被遮挡的部分，清楚地知道哪些内容会被隐藏。

常见问题

clip-path 会影响可点击区域吗？

会。默认情况下，只有遮罩区域内的指针事件会被记录 ， 被遮挡的区域既不可见也无法点击。若想元素可视遮罩但仍可全面点击，请在该元素上使用 pointer-events: all 或叠加一个透明层。

可以为 clip-path 设置动画吗？

可以，clip-path 支持 CSS 过渡和动画。在两个点数相同的多边形之间动画时会产生流畅的形状变化效果。点数不同的形状之间会跳变而非插值过渡。

所有浏览器都支持 clip-path 吗？

所有现代浏览器都支持 clip-path。对于通过 url(#id) 语法使用 SVG 形状，支持度更广。基本的 polygon、circle、ellipse 和 inset 值在 Chrome、Firefox、Safari 和 Edge 上普遍有效。

CSS clip-path 的真正作用

CSS clip-path 属性将元素遮罩为所选形状：形状内的所有内容可见，形状外的所有内容变为透明。元素的布局框不变（仍占据相同的矩形用于边距折叠、流式布局和兄弟元素定位），但只有裁剪区域内的像素被绘制。这使 clip-path 不同于裁剪（永久改变图像）和不同于定位（移动事物）：clip-path 是在显示时应用的遮罩，就在像素到达屏幕之前。

有四个基本形状函数：polygon()（一系列顶点的百分比或像素坐标）、circle()（半径加一个中心）、ellipse()（两个半径加一个中心）和 inset()（从每个边缘测量的矩形，可选择圆角）。对于过于复杂而无法使用这四个的形状（不规则曲线、带凹陷凸缘的星星、书法风格的轮廓），clip-path 也通过 path() 接受 SVG 路径或通过 url(#id) 引用 SVG <clipPath> 元素。浏览器绘制元素，然后通过你的形状定义的 alpha 遮罩进行合成。

clip-path 对现代 Web 设计很重要，因为它实现了十年前需要图像编辑器才能实现的形状。对角线分区分隔符、六边形头像裁剪、人字形横幅、星形照片：现在全部可以用纯 CSS 实现，可缩放到任何大小，悬停时可动画，并且可访问，因为底层元素仍然是 HTML，而不是栅格化图像。权衡是冗长：为一个简单的菱形手写 polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) 是可行的，但 12 顶点的星星或自定义徽标镂空在没有可视化编辑器的情况下是不切实际的。这就是这个生成器的用武之地。

本工具的幕后运作

预览是一个 div，应用了你选择的 clip-path 作为内联 CSS，在每次拖动控制手柄时更新。手柄是绝对定位的圆形，覆盖在预览顶部每个顶点的百分比坐标处。当你拖动手柄时，JavaScript 捕获 mousemove（或 touchmove）事件，将像素位置转换为预览区域的百分比，更新内存中的多边形顶点，并重新应用 clip-path 字符串。实时渲染意味着你在拖动时看到形状变化，而不是之后。

生成的 CSS 通过将顶点连接成多边形字符串构造：多边形模式的 polygon(x1% y1%, x2% y2%, ...)，或较简单形状类型的 circle(r% at cx% cy%)、ellipse(rx% ry% at cx% cy%)、inset(top right bottom left round radius)。使用百分比值而不是像素值是因为百分比会自动随元素缩放：在 300x200 时看起来正确的多边形在 600x400 时也看起来正确，无需更改 CSS。代码框在每次交互时更新，复制 CSS 按钮将当前值写入剪贴板。

没有任何东西离开你的浏览器。预览、形状计算、CSS 生成和剪贴板复制都是客户端 JavaScript。不发出网络请求；不上传任何图像；不分析你的形状选择。该工具除了首次加载时提供的静态 HTML 和 JavaScript 之外，没有任何后端。使用期间打开浏览器的网络选项卡，你会看到初始页面加载后零请求。你生成的 CSS 是你的，可以粘贴到任何样式表中。

CSS 裁剪简史

• SVG clipPath，2001 年。SVG 1.0 规范（W3C 推荐标准，2001 年 9 月）引入 <clipPath>，允许任何 SVG 元素被另一个形状遮罩。SVG 裁剪处理复杂路径但需要内联 SVG 标记，限制了在没有 SVG 流畅度的纯 HTML 页面中的重用。
• CSS clip 属性，1998 年至 2010 年代。原始 CSS clip 属性（CSS 2 规范，1998 年）仅支持 rect()，一个对绝对定位元素的四值矩形裁剪。到 2014 年受限并已弃用，但在遗留的「仅屏幕阅读器」CSS 模式中仍然可见，其中可见内容被裁剪到 1x1 像素以实现可访问性。
• CSS Masking Module Level 1，2014 年。W3C 发布 CSS Masking Module Level 1 规范（2014 年 4 月），引入了现代 clip-path 属性，支持 polygon、circle、ellipse、inset 和 SVG 路径。Chrome 24（2013 年 1 月）和 Safari 7（2013 年 6 月）在正式规范之前提供了基本形状；Firefox 在版本 54 中跟进（2017 年 6 月）。
• Adobe 野兽派 Web 设计浪潮，2015 年至 2017 年。带有对角线切割的英雄部分、倾斜的横幅分隔符和六边形团队照片网格成为设计趋势，由 Webflow 等工具和 CSS-Tricks 上的设计文章推动。Awwwards 风格的作品集突出了 clip-path 技巧，该属性从「晦涩的 CSS 好奇心」变为「预期的现代技术」。
• Internet Explorer 死亡，2022 年。Microsoft 于 2022 年 6 月 15 日退役 Internet Explorer，结束了对现代 CSS 功能（包括 clip-path）的最后一个有意义的浏览器障碍。到 2023 年，「支持 clip-path 吗？」不再是严肃的跨浏览器问题，该属性成为仅 CSS 设计中的默认工具。
• CSS shape() 函数，2024 年及以后。CSS Shapes Module 继续演进，提案如 shape()（使用 CSS 友好的语法而不是 SVG 路径字符串的更灵活的 path() 替代品），无需 SVG 上下文切换即可实现复杂形状。浏览器支持在 2025 年和 2026 年逐步推出。

真实世界的工作流

• 英雄区域对角线切割。「梯形英雄」模式，其中英雄部分的下边缘对角倾斜而不是水平，是最受欢迎的 clip-path 用途之一。简单的 polygon(0 0, 100% 0, 100% 90%, 0 100%) 创建一个 10% 左下到右上的斜坡。在下面添加第二部分，使用相反的斜坡，你会得到一个「撕纸」或「堆叠角度」布局，感觉是有意而为之，无需任何图像。
• 六边形头像网格。团队页面、贡献者列表或运动队名单经常使用六边形照片裁剪作为圆形头像的更动态替代方案。六顶点多边形 clip-path 创建六边形；CSS grid 排列交错的蜂窝布局。与在 Photoshop 中裁剪相比，照片保持原始且未修改：通过单个 CSS 编辑更改六角方向或切换到圆形。
• 悬停图像显示效果。在悬停时动画 clip-path 创建「图像显示」，其中裁剪部分平滑展开。常见模式：图像从一个小圆圈开始，悬停时扩展到完全覆盖，或者多边形从一个细斜线开始，长成一个完整的矩形。clip-path 上的 CSS 过渡在具有相同顶点数的两个多边形之间平滑插值，无需 JavaScript 即可产生 60fps 动画。
• 自定义按钮形状。游戏 UI、未来主义界面和创意作品集经常使用非矩形按钮（箭头形状、六边形、平行四边形）。clip-path 将标准按钮元素遮罩为所选形状，保持底层按钮可访问（仍然可聚焦、仍然可通过键盘点击、仍然可由屏幕阅读器宣布），同时呈现自定义视觉效果。
• 装饰性区段分隔符。页面区段之间的波形分隔符、人字形分隔符和「撕页」分隔符曾经需要背景 SVG 图像或每个区段的图像。clip-path 使用带圆角的 inset 或遵循所需波形的多边形在纯 CSS 中生成它们。分隔符自动缩放并响应布局更改。
• 创意照片画廊。使用统一矩形缩略图的照片画廊布局感觉通用；将每个缩略图裁剪为略有不同的多边形形状，无需手动遮罩每个图像即可产生手工剪裁的拼贴感。在网格中循环的 3 到 5 个多边形变体的小集合创建视觉节奏，同时保持高性能（相同的形状只是通过变换应用于不同的图像源）。

常见陷阱及其含义

• clip-path 不改变布局。一个常见的惊喜：将元素裁剪为较小的形状不会减少它在文档流中占用的空间。元素仍然占据其完整的布局框；clip-path 只改变绘制的内容。要获得物理上占用较少空间的元素，你还需要调整其大小。如果你想要裁剪的内容实际上被裁剪，请在包装器上使用 overflow: hidden，或使用带有较小布局框的 CSS mask。
• 宽高比不匹配会破坏百分比坐标。以百分比表示的多边形坐标会随元素均匀缩放。一个菱形 polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) 在任何大小下都保持菱形，但如果元素的宽高比改变，它会变成更宽或更高的菱形。对于需要在不同宽高比中保持视觉一致的形状，使用像素值或 min(50vw, 50vh) 计算，或使用 aspect-ratio CSS 属性约束元素的宽高比。
• 裁剪区域不可点击。指针事件仅在裁剪后元素可见的地方注册。裁剪为三角形的按钮仅在三角形上可点击，而不是在它占据的看不见的矩形空间上。这通常是期望的（不会在空白区域意外点击），但当多个裁剪的按钮重叠或当交互内容在裁剪区域外视觉延伸时可能会令人困惑。
• 动画许多裁剪元素代价高昂。clip-path 在每个动画帧触发合成，如果同时应用于许多元素或大元素（全屏英雄部分），可能会降低帧率。对于 60fps 动画，限制同时动画的裁剪元素数量，偏好更简单的形状（4 到 6 顶点多边形而不是 20 顶点），并考虑在你计划动画的元素上使用 CSS will-change: clip-path，提示浏览器使用 GPU 加速。
• 多边形需要匹配的顶点数才能变形。仅当两个多边形具有相同数量的顶点时，在两个多边形形状之间动画 clip-path 才有效。从三角形（3 个点）到正方形（4 个点）会立即捕捉而不是平滑变形。要在视觉复杂度不同的形状之间平滑变形，使用相同数量的点定义两个多边形，将多余的放在一个形状上「隐藏」的坐标处（例如，两个点彼此叠加）。
• Safari 对 SVG 路径语法需要 -webkit- 前缀。基本形状（polygon、circle、ellipse、inset）在所有现代浏览器中都没有前缀。但在使用 path() 函数或引用 url(#id) SVG clipPaths 时，Safari 仍然需要 -webkit-clip-path 前缀。对于跨浏览器兼容性，同时声明 -webkit-clip-path 和 clip-path 具有相同的值用于基于 SVG-path 的裁剪。自动前缀工具（Autoprefixer、PostCSS）在现代构建设置中自动处理这一点。

隐私：一切都在你的浏览器中运行

CSS 生成器工具传统上分为两个阵营：带有客户端 JavaScript 的简单 HTML 页面（私密、快速、无需账户）和带有云保存项目的完整功能编辑器（协作的，但每次形状编辑都会记录在其他人的服务器上）。这个工具坚定地处于第一阵营。你拖动的多边形坐标、你选择的颜色、你复制的 CSS：所有都保留在浏览器会话中，从不发送到任何地方。刷新页面，状态消失，除非你先复制了 CSS。

隐私含义主要对专有工作很重要。设计代理机构为机密品牌重新设计的自定义按钮形状原型设计、开发未公开游戏 UI 的独立开发者、为仍在 NDA 下的产品设计布局的企业团队：任何形状本身或其迭代历史可能泄漏正在进行的工作信息的环境。使用此工具，这些风险都不存在，因为没有捕获任何东西。在拖动手柄时打开浏览器的网络选项卡，你会看到零出站请求。

什么时候另一个工具是正确选择

• 用于复杂路径的 SVG 编辑器。对于不规则曲线、书法形状或超出基本形状函数的任何内容，在 Figma、Inkscape 或 Adobe Illustrator 中绘制形状并导出为 SVG 路径比手动编码 clip-path 坐标更实用。然后使用 clip-path: path('M...') 或通过 ID 引用 SVG。SVG 编辑器提供贝塞尔手柄和精度；clip-path 生成器没有。
• 用于 alpha 混合和渐变的 CSS mask。clip-path 产生二进制 alpha（完全可见或完全裁剪）。对于软边形状（渐变淡入淡出、抗锯齿曲线、部分透明度），CSS mask 或 mask-image 处理完整的 alpha 渐变。mask 支持遮罩图像（任何 PNG、SVG 或渐变），其中黑色像素隐藏，白色像素显示，灰色提供部分不透明度。clip-path 无法做到这一点。
• 用于永久裁剪的图像处理。如果你想要最终图像文件本身被裁剪为某种形状（更小的文件大小、没有 clip-path 开销、没有未裁剪后备的风险），请在图像编辑器或我们的 Image Compressor 工具中进行裁剪。clip-path 是用于 HTML 元素的显示时遮罩；如果目标是静态图像资产，请直接裁剪文件。
• 用于设计原型的 Figma 或 Sketch。在原型设计布局时，Figma 的矢量工具比拖动 clip-path 手柄更快地处理复杂的形状探索。使用设计工具找到你想要的形状，然后将最终形状转换为 clip-path CSS 用于生产。设计工具还比实时 CSS 生成器更好地处理迭代、撤消历史和团队评论。

更多常见问题

我可以为顶点坐标使用百分比或像素吗？

两者都可以。百分比随元素的框缩放，因此以百分比定义的多边形在元素调整大小时保持其比例形状。像素是绝对的，因此带有像素坐标的多边形无论元素如何都保持相同的大小。对应该随布局调整大小的形状使用百分比（大多数情况），对需要精确像素位置的形状使用像素（例如，与特定设计元素对齐）。你也可以混合使用：polygon(50% 10px, 100% 50%, ...) 是有效的。

clip-path 会影响 SEO 或屏幕阅读器吗？

不会。clip-path 仅是视觉属性。底层 HTML 完全可访问：裁剪元素内的文本仍然被搜索引擎索引、仍然被屏幕阅读器宣布、仍然可通过键盘导航选择。使用 clip-path 进行视觉样式设计；不要将其用作语义隐藏内容的方式（这需要 display: none 或 aria-hidden 属性）。视觉裁剪的内容仍然存在于可访问性树中。

如何使 clip-path 响应式？

使用百分比而不是像素，并在不同的断点检查结果。对于在移动设备与桌面设备上需要不同比例的形状，使用 CSS 媒体查询交换 clip-path 值：在 @media (max-width: 768px) 中为移动形状声明不同的 clip-path。对于复杂的响应式需求（例如，在移动设备上变为圆形的多边形），考虑使用 JavaScript 根据窗口大小重新计算 clip-path，尽管纯 CSS 方法处理大多数情况。

clip-path 可以应用于视频和 iframe 吗？

可以。clip-path 适用于任何 HTML 元素，包括 <video> 和 <iframe>。遮罩在元素级别应用，因此裁剪为六边形的视频在该六边形内播放。视频控件（显示时）也被裁剪，这可能会无意中隐藏播放/暂停按钮；如果你需要在裁剪区域外可见控件，请将视频包装在容器元素中。

多边形顶点的最大数量是多少？

CSS 标准没有规定正式限制。实际上，浏览器处理具有数百个顶点的多边形而没有渲染错误，但性能随顶点数下降，尤其是对于动画 clip-path。对于大多数装饰形状，目标是 3 到 12 个顶点；如果你需要更多复杂性，切换到 SVG path() 以获得更清晰的创作和类似的性能特征。超过 50 个顶点，clip-path 变得更难手动维护，SVG 编辑器工作流程更有意义。

我可以裁剪文本而不仅仅是图像和框吗？

可以。clip-path 也适用于文本元素，像任何其他元素一样遮罩它们。视觉效果是「透过形状偷窥的文本」。对于更复杂的文本形状效果（例如，使用文本轮廓作为图像的裁剪遮罩），将 clip-path 与 background-clip: text 结合使用，后者使用文本形状本身作为元素背景的裁剪区域。常见模式：带有仅在文本形状内部可见的渐变背景的大文本。