运行工具
本工具专为前端开发者设计，旨在简化 CSS clip-path 属性代码的生成过程，帮助您在网页中轻松实现复杂的几何遮罩效果。传统的手动计算百分比坐标不仅耗时且容易出错，而通过本工具，您只需从预设库中选择所需的形状并调整关键参数，即可快速获得准确的样式代码。我们支持多种常见几何图形，包括圆形、椭圆、三角形、六边形、五边形、星形以及菱形，满足多样化的 UI 设计需求。针对圆形和椭圆，您可以精确控制其尺寸百分比及中心点位置，从而实现灵活的布局适配；而对于多边形类形状，工具会自动应用经过优化的固定顶点坐标模板，确保图形结构的规范性。生成的代码片段可以直接复制到您的样式表或内联 style 标签中，广泛适用于头像裁剪、图片异形展示、创意背景设计等场景。所有计算均在浏览器端实时完成，界面简洁直观，无需后端交互，适合需要快速验证遮罩视觉效果的开发工作流。通过实时调整输入值，您可以即时预览不同比例下的代码输出，显著提升样式调试效率，减少反复试错的时间成本。无论是初学者还是资深工程师，都能利用此工具快速构建具有视觉冲击力的网页元素，提升整体用户体验。
使用说明
- 在“形状”下拉菜单中选择所需的几何图形，如 circle（圆形）或 triangle（三角形）。
- 在“尺寸”输入框中填写数值，该值将作为百分比应用于形状的大小。
- 在“位置”输入框中指定中心点坐标，例如 center 或具体的百分比值。
- 点击生成按钮，系统将根据您的输入输出对应的 CSS clip-path 代码片段。
- 复制生成的代码并粘贴到您的 CSS 文件或 style 标签中即可生效。
示例
- 生成一个尺寸为 40%、位于中心的圆形遮罩：clip-path: circle(40% at center);
- 生成一个尺寸为 60%、位于左上角的椭圆遮罩：clip-path: ellipse(60% 36% at top left);
常见问题
支持哪些形状？
支持圆形、椭圆、三角形、六边形、五边形、星形和菱形。如果输入未识别的形状名称，系统将默认使用圆形几何结构。
尺寸参数如何影响多边形？
尺寸参数仅影响圆形和椭圆的渲染比例。三角形、星形等多边形使用固定的百分比坐标模板，更改尺寸数值不会改变其顶点位置。
位置参数的格式是什么？
位置参数接受 CSS 标准关键字（如 center, top left）或百分比值。对于圆形和椭圆，该值会附加在 at 关键字之后。
生成的代码兼容哪些浏览器？
clip-path 属性在现代浏览器中广泛支持，但建议在实际项目中检查目标用户的浏览器兼容性列表。