分类: 开发工具
CSS clip-path 生成器
选择形状并复制它的 clip-path 值
从圆形、椭圆到六边形、箭头或对话气泡中选择一种形状，调整它相对边缘的内缩程度，并复制生成的 clip-path 值，同时提供实时预览。
输出
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
手写一个 clip-path 多边形意味着要逐点计算百分比位置，并想象这些点连接起来的样子，除了简单的三角形之外，这种方式迭代起来都很慢。本工具内置了一组常见形状的现成点位列表，再配上一个统一的内缩控制项，让每种形状的所有点都以相同方式向中心收缩，因此你无需自己动手做几何计算，就能预览并复制出可直接使用的 clip-path。
使用方法
- 选择一种形状。
- 调整内缩程度，让它在自身的盒子内放大或缩小。
- 复制 clip-path 声明。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 为什么圆形和椭圆的表现和其他形状不一样？
- circle() 和 ellipse() 接受的是半径，因此内缩会直接缩小半径；而多边形形状则是将每个点都按相同的百分比向中心收缩。
- clip-path 会影响布局，还是只影响可见部分？
- 只影响可见部分。元素在布局上仍然保留原来的盒子尺寸；clip-path 只是隐藏了形状之外的部分，就像 overflow: hidden 隐藏盒子之外的内容一样。
- 会向服务器发送内容吗？
- 不会。形状的各个点都是在页面内根据你选择的形状和内缩程度计算出来的，这也是预览能即时更新的原因。