CSS Clip-Path 生成器

什么是 CSS Clip-path？

clip-path 是一个强大的 CSS 属性，它允许你创建一个“裁切路径”，只有路径区域内的元素内容才会显示，区域以外的部分会被隐藏（裁切掉）。这就像是用剪刀把图片或容器剪成特定的形状。

在过去，要实现非矩形的布局（如三角形、圆形、多边形图片）通常需要使用 PNG 透明图片或复杂的 SVG。而现在，只需一行 CSS 代码即可实现，且支持响应式和动画效果。

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

最灵活的函数。通过定义一系列坐标点 (x y) 来绘制任意多边形。最少3个点。

clip-path: circle(50% at 50% 50%);

定义圆的半径和圆心位置。语法为 circle(radius at x y)。

clip-path: ellipse(25% 40% at 50% 50%);

类似于圆形，但可以分别定义水平半径和垂直半径。

clip-path: inset(10% 20% 10% 20%);

定义距离上、右、下、左边缘的距离。还可以使用 round 关键字添加圆角。

clip-path 的兼容性如何？

现代浏览器（Chrome, Firefox, Safari, Edge）都很好地支持 clip-path。对于极老旧的浏览器（如 IE），它将不会生效，元素会显示为原始的矩形（优雅降级）。

裁切真的把元素“切掉”了吗？

只是视觉上隐藏了。元素原本占据的空间布局（Layout）不会改变，依然是一个矩形盒子，但用户的鼠标点击事件（Click）在被裁切掉的区域将不会触发。

如何给裁切后的形状加边框？

border 属性会跟随原始的矩形盒子。要在裁切形状上加边框，通常需要使用 drop-shadow 滤镜或者创建一个略大的重叠元素作为背景。普通的 border 是无法沿着 clip-path 边缘显示的。

我可以裁剪文字吗？

不可以。clip-path 作用于容器元素。如果你想做文字遮罩效果（把文字镂空显示背景），应该使用 background-clip: text。

生成的代码可以直接用在 CSS 中吗？

是的。工具生成的百分比代码是响应式的，可以直接粘贴到你的 CSS 类中使用，它会自适应容器的大小。

支持添加动画吗？

支持。只要两个形状的类型相同（比如都是 polygon）且坐标点数量一致，CSS transition 就可以自动计算中间状态，产生平滑的变形动画。

这个工具完全免费吗？

是的，本工具完全免费，所有计算都在您的浏览器本地完成，不会上传任何数据。

如何重置画布？

点击画布下方的“重置形状”按钮即可恢复当前形状的默认状态。