设计 · 本地工具
CSS Clip Path Generator
拖动、使用键盘或输入坐标编辑多边形。从四种预设开始，在本地复制 clip-path 声明或完整 CSS。
任务路径 / 从输入到结果
选择起始形状
本地运行 · 不做任何上传
对比四种多边形，再到工作区设置相同参数。每个预览与对应 CSS 使用同一个多边形；导出规则的初始尺寸为 240 × 180 px。
前往工作区调整这些参数用六边形制作团队头像或重复排列的徽章。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}用倾斜的菱形装饰小图片或页面细节。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}用四个顶点的倾斜形状装饰卡片。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}让横幅边缘指向下一段内容。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}先使用上方任一形状的 CSS，再在其后添加以下规则。将图片路径和替代文本换成自己的内容。容器保持 4:3 比例；object-fit: cover 通过裁切填满容器，不拉伸图片。容器缩放时，百分比坐标随之调整。
<img class="clipped-shape"
src="/your-image.jpg"
alt="描述你的图片"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}当前提供四种模板和两个滑块，不支持自由编辑顶点、导入 SVG 路径或绘制曲线。自定义后，可在工作区使用“复制 CSS”或“下载 .css”保存规则。
任务路径 / 从输入到结果
选择六边形、菱形、平行四边形或人字形。两个滑块调整预设；单独编辑顶点后切换为自定义多边形。
拖动编号顶点或输入坐标。聚焦顶点后，方向键移动 1%，Shift + 方向键移动 10%。添加操作会在所选顶点与下一顶点之间插入中点。
完整示例包含所选颜色、240px 宽度及 4:3 宽高比。编辑区会根据屏幕缩放。
导出前检查所有边。带编号的控制点仅用于编辑，不会出现在导出的 CSS 中。
CSS 输出: 仅 clip-path 声明 / 完整示例 CSS. 完整示例包含所选颜色、240px 宽度及 4:3 宽高比。编辑区会根据屏幕缩放。
百分比坐标随元素尺寸缩放。将声明粘贴到现有规则中，或使用完整示例的 .clipped-shape 类，并检查桌面和移动端效果。
CSS 裁剪路径生成器 使用经过验证的本地执行路径，不会创建隐藏的输入或输出历史记录。
在当前浏览器标签页内运行。
使用中的工具数据绝不会成为 Toolars 的文档记录。
无需创建账户即可使用核心工作流。登录后收藏才会同步到你的账户。
关闭标签页，当前的工作数据即刻消失。
2026-09-24 本地浏览器实测：从默认六边形开始（水平点 24%、垂直点 50%），选中第 1 点，将 X 从 24% 改为 30%，颜色设为 #ff6600。预览呈橙色六顶点多边形，clip-path 为 polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)；其余五点的顺序不变。
完整示例 CSS 使用 .clipped-shape、宽度 240px、宽高比 4 / 3、背景 #ff6600，并同时写入 -webkit-clip-path 与 clip-path。点击复制 CSS 的结果与下载的 toolars-clip-path.css 一致（240 字节）；切换为仅剪裁声明时，复制得到 clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);（UTF-8 共 73 字节）。请在自己的布局中检查实际裁剪。
将第 1 点 X 设为 101%。2026-09-24 实测工作区提示坐标必须为 0–100% 的有限数值，预览与生成的 CSS 清空，复制和下载按钮禁用。把 X 改回 30% 后恢复 polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)，即可再次复制。交叉边缘不会自动修复。
从四种预设开始，添加、删除或移动多边形顶点，导出 clip-path 声明或完整示例 CSS。 百分比坐标随元素尺寸缩放。将声明粘贴到现有规则中，或使用完整示例的 .clipped-shape 类，并检查桌面和移动端效果。
常见问题