CSS 形状生成器

📖 工具介绍

CSS 形状生成器是一款帮助开发者用 clip-path 快速切出各种几何外形的免费在线工具。网页里想用三角形标签、菱形卡片、蜂窝六边形、五角星、对话气泡或斜角横幅时，过去要么切图片，要么手算 polygon 的百分比顶点，既麻烦又容易算错。本工具把六种常用形状做成一键切换的按钮，你只要选择形状、挑一个填充色，再拖动变形参数滑块，预览区里的色块就会实时被裁剪成对应外形，下方同步生成标准的 clip-path: polygon(...) 代码。变形参数对不同形状含义不同：三角形控制顶角位置，六边形控制水平切角宽度，星形控制内半径大小，气泡控制尾巴落点，斜角控制切角深度，全部由顶点坐标实时计算得出。生成的代码可以直接复制到项目，clip-path 既能裁色块也能裁图片。工具全程在浏览器本地拼装顶点字符串并应用，不发起网络请求，界面支持简中、繁中与英文三语。

✨ 功能特点

• 六种几何外形：三角形、菱形、六边形、星形、气泡、斜角一键切换
• 顶点实时计算：根据变形参数用坐标公式算出 polygon 顶点，数学准确
• 颜色自由取色：填充色任意选择，预览即时更新
• 变形参数可调：顶角、切角、内半径、尾巴位置、斜角深度平滑拖动
• 标准代码输出：生成带 background 与 clip-path 的完整 CSS 规则
• 实时预览：色块被 clip-path 裁剪的效果所见即所得

📝 使用方式

1. 在顶部点击你想要的形状按钮
2. 用取色器设置形状的填充颜色
3. 拖动变形参数滑块，观察预览色块外形的变化
4. 确认形状与配色符合预期后，查看下方生成的 CSS 代码
5. 点击复制代码，粘贴到项目样式表中应用到任意元素

⚠️ 注意事项

• 裁剪本质：clip-path 只改变可见区域，元素本身的尺寸仍为矩形
• 参数含义：同一滑块对不同形状作用于不同顶点，切换形状后含义会变
• 星形算法：五角星由五个外顶点与五个内顶点交替采样生成
• 图片适用：clip-path 同样可作用于 img，实现异形图片裁剪
• 本地生成：所有顶点字符串均在浏览器拼装，不产生网络请求