功能介绍
CSS Clip-Path裁剪生成器是一个可视化工具，帮助你快速生成不同形状的clip-pathCSS代码，支持多边形、圆角矩形、圆形、椭圆形四种基础形状，还提供多种常用预设形状，可通过拖拽顶点自由调整形状。
使用方法
- 选择裁剪类型：支持多边形（polygon）、圆角矩形（inset）、圆形（circle）、椭圆形（ellipse）四种类型。
- 使用预设：在预设下拉框中可直接选择三角形、梯形、菱形、箭头、五边形、五角星等常用形状。
- 调整形状：对于多边形，可以点击画布添加顶点，也可以拖拽红色顶点调整位置，点击添加顶点按钮可在中心位置添加一个新顶点。
- 调整参数：对于圆角矩形、圆形、椭圆形，直接在参数输入框中修改数值即可实时预览效果。
- 复制代码：调整完成后点击「复制CSS代码」按钮即可将生成的代码复制到剪贴板使用。
实现原理
clip-path是CSS的一个属性，用于裁剪元素，只显示元素指定的区域，其他区域会被隐藏。本工具生成的代码遵循W3C标准语法：
- 多边形：
polygon(x1% y1%, x2% y2%, ...)，每个顶点用百分比坐标表示位置。 - 圆角矩形：
inset(上% 右% 下% 左% round 圆角%)，通过四边距离定义裁剪区域，支持圆角。 - 圆形：
circle(半径% at 圆心X% 圆心Y%)，通过圆心位置和半径定义圆形裁剪区域。 - 椭圆形：
ellipse(X半径% Y半径% at 中心X% 中心Y%)，通过中心位置和XY轴半径定义椭圆形裁剪区域。
注意事项
- 本工具生成的坐标均使用百分比，适配不同尺寸的元素，无需修改即可使用。
- 部分旧版浏览器不支持
clip-path属性，使用前请确认浏览器兼容性。 - 多边形至少需要3个顶点才能生效。