CSS clip-path 裁剪生成器
免费在线 CSS clip-path 生成器。支持 polygon、circle、ellipse、inset 四种模式，顶点可拖拽，实时预览并一键复制 CSS 代码。
什么是 CSS clip-path？
clip-path 是一个 CSS 属性，可以把元素裁剪成基本形状或路径。形状以外的部分会被隐藏，因此无需修改图片本身，就能把矩形图片或容器变成三角形、圆形、六边形、斜切横幅或任意自定义多边形。
哪些浏览器支持 clip-path？
所有现代浏览器都支持本生成器使用的基本形状函数：polygon()、circle()、ellipse() 和 inset()，包括 Chrome、Edge、Firefox、Safari 和 Opera。只有非常老旧的移动版 Safari 才需要 -webkit-clip-path 前缀写法。
polygon 模式怎么用？
在 polygon 模式下，预览区会把每个顶点显示为可拖拽的圆点。拖动圆点即可移动顶点；在空白处双击可插入新顶点；单击圆点选中后，按删除按钮即可移除。CSS 值会以百分比坐标实时更新。
polygon() 里的百分比是什么意思？
每个顶点写成 X Y 两个百分比，从元素左上角开始计算。由于数值相对于元素尺寸，形状会随元素缩放，在任何屏幕宽度下都保持响应式。
circle、ellipse 和 inset 有什么区别？
circle(半径 at x y) 裁剪出正圆；ellipse(rx ry at x y) 可分别设置水平和垂直半径；inset(上 右 下 左) 则是从四边向内收缩裁剪出矩形。本工具为所有参数都提供了滑杆和数值输入。
clip-path 会影响布局或点击吗？
clip-path 只是视觉裁剪。元素在布局中仍保留原始盒子，周围内容不会移动。但点击等指针事件只落在裁剪后的可见区域内，这正好可以用来制作异形按钮。
clip-path 可以做动画吗？
可以。当两个 clip-path 值使用相同的形状函数且顶点数量一致时，浏览器可以平滑过渡，例如从大 inset 过渡到小 inset，或两个顶点数相同的 polygon 之间变形。用 CSS transition 属性即可实现。
我的图片或数据会被上传吗？
不会。预览图是 Canvas 在本地绘制的渐变示例图，所有计算都在浏览器中完成。你设计的任何内容都不会发送到服务器，页面加载后离线也能使用。
clip-path 有哪些常见用途？
常见用途包括斜切 Hero 区块、六边形或圆形头像遮罩、三角形气泡箭头、创意图片拼贴、卡片切角按钮等，完全不需要图像处理软件。
如何使用CSS clip-path 裁剪生成器
用 CSS clip-path 给任意元素塑形，无需修图。选择形状函数、拖拽控制点，即可复制可直接使用的 CSS。全部在浏览器本地完成。
- 选择模式：Polygon（多边形）、Circle（圆形）、Ellipse（椭圆）或 Inset（内缩）。
- 多边形模式下拖动顶点圆点；双击空白处添加顶点；点击选中顶点后可删除。
- 圆形、椭圆、内缩模式用滑杆微调参数，也可以直接输入精确的百分比数值。
- 预览区基于本地生成的渐变示例图实时更新裁剪效果。
- 复制单行 clip-path 规则，粘贴到你的样式表中即可使用。
让两个状态的 polygon 顶点数量保持一致，就能用 CSS transition 实现平滑的形状变形动画。
相关工具
- CSS 阴影生成器 免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
- CSS 渐变生成器 可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。
- CSS格式化工具 即时格式化和美化CSS代码，将压缩的CSS转换为可读的、缩进良好的代码，支持自定义选项。
- CSS压缩器 免费在线CSS压缩工具。即时压缩和优化CSS代码，移除空白、注释和多余字符。减小文件体积，提升网页加载速度。