跳到主要内容
忆云竹

CSS 多边形裁剪生成器

拖动或精确编辑多边形节点,实时预览 clip-path 并导出可用 CSS。

拖动节点或使用方向键调整,按住 Shift 可加大步长,也可直接修改坐标。

CSS

初始形状
内容只在当前浏览器中处理,不上传或保存。

工具介绍

为斜切面板或几何徽章勾勒轮廓,无需另做图片蒙版。

使用说明

选择三角形、菱形、六边形等预设,再拖动节点调整轮廓。也可编辑每个点的 X、Y 百分比,添加或删除节点。用 Tab 聚焦节点后可用方向键微调,按住 Shift 增大步长。

支持 3–32 个节点,坐标限制在 0–100%,按列表顺序连接并闭合。输出为 clip-path: polygon(...),预览与 CSS 一致;不生成曲线路径或裁剪后的图片。

常见问题

能画曲线或把顶点移到边界外吗?

此编辑器生成 3–32 个顶点的多边形,每个坐标范围是 0%–100%;不支持曲线路径或边界外的顶点。

拖动节点后为什么出现意外的缺口?

节点按列表顺序连接,最后一点再连回第一点。把节点跨过其他边时,轮廓可能产生自相交。可先选一个预设,再沿轮廓顺序调整各点;不需要的点可以删除,但至少要保留三个。

评论

0
后参与评论。
暂无评论
回复讨论

按时间查看完整回复脉络;每条回复都会标明它回应的具体内容。