CSS 剪辑路径生成器

CSS Clip-path 接受由任意数量的 x/y 坐标对组成的 Polygon() 函数，这意味着它可以将盒子雕刻成远远超出大多数人所能达到的简单矩形和圆形的形状。问题在于，手动输入这些坐标非常繁琐，而且几乎不可能正确处理基本三角形以外的任何内容 - 该生成器将坐标列表转换为实时预览上的一组可拖动点，因此您看到的形状始终是 CSS 生成的形状。

预览上的每个点都存储为框宽度和高度的百分比，这正是 Clip-path: Polygon() 本身在幕后工作的方式：无论元素最终在实际页面中的大小如何（从小图标蒙版到全角英雄横幅），以这种方式构建的形状都保持其比例正确。拖动任意点以重塑轮廓，单击边缘附近以在单击的位置精确添加新点，或者双击现有点将其删除 - 编辑器始终保留至少三个点，因为多边形不能存在更少的点。

选择六个捆绑的预设是为了证明剪辑路径可以做的不仅仅是凸形：星形和箭头都依赖于向内的反射角，语音气泡从普通的矩形中雕刻出三角形的尾巴，票根在相对的边缘上凹陷了两个凹口，就像真正的穿孔票一样。加载任何预设并从那里继续拖动 - 编辑器不会将您锁定在起始形状中。

上传您自己的图像以根据实际内容（而不是普通框）预览剪辑路径，或者完全跳过上传，预览会退回到条纹图案，以便剪切形状无论哪种方式都保持清晰可见。与该网站上的每个工具一样，整个过程在浏览器本地运行：没有图像离开您的设备，并且一旦页面加载，生成器就会继续离线工作。