如何生成 CSS clip-path 裁剪形状

选择形状、尺寸和位置后，工具会生成包含 clip-path 声明的 CSS 片段。圆形和椭圆形支持尺寸与位置设置，其他列出的多边形使用固定坐标模板。

先了解这个工具能生成什么

CSS clip-path 可以把元素裁剪成圆形、椭圆形或多边形。使用这个工具时，你可以选择形状，并为圆形或椭圆形设置尺寸与位置，随后获得可放入样式表的 CSS 片段。它适合快速准备头像、卡片、图片和装饰元素的裁剪样式。

生成 CSS 裁剪路径的步骤

1. 选择形状。可用的名称包括 circle、ellipse、triangle、hexagon、pentagon、star 和 diamond。如果不填写形状，工具会使用圆形。
2. 对圆形或椭圆形填写尺寸。尺寸是百分比输入；不填写时使用 50。填写位置时，使用类似 center 的 CSS 位置值；不填写时使用 center。
3. 生成结果并复制 CSS 片段。片段会包含用于元素裁剪的 clip-path 声明。
4. 将声明放入目标元素的 CSS 规则中，再根据页面效果调整输入。圆形会把填写的尺寸作为百分比，并把位置放在 at 后面。椭圆形会使用填写的尺寸作为第一个百分比，第二个百分比则是该尺寸乘以 0.6，两个百分比都使用填写的位置。
5. 如果选择三角形、六边形、五边形、星形或菱形，结果会采用对应的多边形模板。这些形状使用固定的百分比坐标，因此尺寸和位置输入不会改变这些多边形模板。

如何理解生成结果

结果的核心是一个 clip-path 声明，而不是一张已经裁剪好的图片。圆形和椭圆形的尺寸、位置会反映在生成的几何参数中；多边形则来自预设坐标。把片段应用到元素后，浏览器会按照该路径显示元素的可见区域。

填写尺寸时，工具会直接使用你提供的数值，不应把它理解为工具会自动限制或修正的范围。位置值也应按 CSS 能接受的形式填写。若需要改变圆形或椭圆形的大小和锚点，可以重新生成片段；若要改变多边形轮廓，则应选择另一个形状模板。

使用示例

你正在制作一个需要居中圆形裁剪效果的头像元素。

在制作圆形头像时选择 circle，输入尺寸 60 和位置 center，然后生成并复制 CSS 片段。

结果应是包含 clip-path 声明的 CSS 片段；对于圆形，尺寸会以百分比出现，位置会位于 at 后面。

使用限制

• 三角形、六边形、五边形、星形和菱形采用固定百分比坐标，尺寸与位置输入不会改变这些模板。

常见错误

• 错误原因：把多边形模板当成可通过尺寸和位置自由变形的形状。修正方法：需要调整圆形或椭圆形的大小、位置时，选择对应形状并填写参数；需要改变多边形轮廓时，改选其他预设形状。

常见问题

不填写形状也能生成 CSS 吗？

可以。未填写形状时会使用圆形；可选的命名形状还包括椭圆形、三角形、六边形、五边形、星形和菱形。

尺寸和位置会影响圆形与椭圆形吗？

可以。对圆形，填写的尺寸会作为百分比，位置会放在 at 后面；对椭圆形，第二个百分比按填写尺寸乘以 0.6 计算。

多边形可以用尺寸和位置重新调整轮廓吗？

不会。三角形、六边形、五边形、星形和菱形使用固定百分比坐标，尺寸和位置输入不会改变这些多边形模板。