CSS裁剪路径生成器
在线CSS裁剪路径生成器，支持 polygon、circle、ellipse、inset 可视化编辑、代码复制与图形导出。
形状类型
预设形状
形状参数
拖动右侧编辑区控制点或使用预设快速调整多边形。
顶点数3
外观设置
deg
实时预览
编辑区域
仅多边形模式可拖拽顶点，其他形状请在左侧参数中调整。
CSS 代码
.shape {
width: 220px;
height: 220px;
background: linear-gradient(135deg, #f59e0b, #f97316);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}当前属性
clip-path
polygon(50% 0%, 100% 100%, 0% 100%)形状类型多边形
导出
工具说明
CSS 裁剪路径生成器用于可视化创建 clip-path 形状，快速完成图形裁剪样式并输出可直接使用的代码。
工具用途
当你需要制作非矩形按钮、卡片遮罩、头像裁剪或装饰图形时，可通过本工具快速完成参数调节并生成样式代码。
核心功能
- 支持 polygon、circle、ellipse、inset 四种常用 clip-path 形状。
- 支持多边形控制点拖拽编辑，并可增减顶点数量。
- 支持渐变颜色、角度、宽高设置与实时预览同步。
- 支持一键复制 CSS 代码，包含 clip-path 与兼容属性。
- 支持导出 SVG 与 PNG，方便设计交付与素材复用。
使用步骤
- 先选择形状类型，或直接点击预设形状快速开始。
- 根据需求调整顶点、半径、内缩值等参数。
- 再设置渐变颜色、方向和尺寸，观察实时预览效果。
- 确认样式后复制 CSS 代码并粘贴到项目中。
- 如需设计稿或素材文件，可直接导出 SVG 或 PNG。
应用场景
- 营销页图形按钮、角标和视觉分割区块设计
- 后台面板中的头像裁剪、卡片造型和模块装饰
- 前端动效开发中的遮罩动画与过渡形状调试
- 设计交付时的样式参数还原与素材导出
使用建议
- 多边形顶点建议从少到多逐步调整，避免形状过度复杂。
- 导出 PNG 前可先放大尺寸，提升位图清晰度。
- 在兼容性要求较高的项目中建议保留 -webkit-clip-path。
- 若用于交互动效，可结合 transition 或 keyframes 做过渡。
隐私说明
本工具不会上传你的样式参数与图形数据，所有计算与导出均在浏览器本地完成。