CSS clip-path 生成器

CSS Clip-Path 生成器是一个用于创建和测试 CSS clip-path 属性的可视化工具。Clip-path 允许您将元素裁剪为基本形状（圆形、椭圆、多边形）或 SVG 路径。该工具提供实时预览和代码生成，帮助您为网页项目设计自定义形状。

点击预设面板中的任意预设形状按钮即可立即应用。工具包含 12 种内置形状：三角形、梯形、平行四边形、五边形、六边形、七边形、八边形、星形、圆形、椭圆、内嵌框和圆角内嵌。预览会立即更新，显示形状如何裁剪元素。

在自定义路径输入框中输入任何有效的 clip-path 值。支持所有 clip-path 函数：polygon()、circle()、ellipse()、inset() 和 path()。工具会显示生成的 CSS 代码，包含标准语法和 -webkit- 前缀以实现最大的浏览器兼容性。点击复制按钮将代码复制到剪贴板。

多边形构建器提供了一个可视化界面来创建自定义多边形形状。每个点由 X 和 Y 坐标（0-100%）定义。添加更多点（最少 3 个）来创建复杂的多边形，或删除点来简化形状。当您调整坐标时，构建器会自动生成有效的 CSS polygon() 语法。

通过调整大小滑块（100-400px）和使用颜色选择器更改元素背景颜色来自定义预览。这些调整帮助您想象 clip-path 在您的设计中以不同元素大小和颜色显示的效果。

CSS clip-path 在所有现代浏览器中都得到支持。工具会自动包含 -webkit-clip-path 以实现 Safari 兼容性。请注意，带有 path() 函数的 clip-path 在旧浏览器中的支持有限。部署到生产环境之前，请务必测试您的目标浏览器。