CSS 剪切路径

CSS 剪切路径

clip-path 可视化编辑，支持自由绘制多边形，上传图片按形状裁剪导出

预览

显示原始轮廓

当前为示例图，上传图片后即可按形状裁剪导出；也可以直接把图片拖入预览区

仅导出选中区域

4 个顶点

点击顶点选中，拖动调整位置；双击顶点删除，点击边上可插入新顶点；拖出边界会自动收在 0-100% 范围内。

生成的 CSS

polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

现代浏览器均支持无前缀 clip-path；剪切只影响绘制区域，不改变元素布局尺寸。

💡 使用说明

clip-path 不影响布局：被剪掉的区域仍占据原位置，只是不可见；元素依旧占满原始宽高，相邻内容不会因剪切而移动。

polygon 顶点使用百分比坐标，随元素尺寸自适应缩放；circle 的半径百分比按对角线参考盒（√(w²+h²)/√2）解析，ellipse 的两个半径分别按宽、高解析。

上传图片后可按当前形状裁剪：PNG/WebP 保留剪掉区域的透明背景，JPG 自动铺白底；「仅导出选中区域」会按形状外接矩形裁掉四周多余部分。

inset + 圆角适合卡片挖角、聊天气泡；星形/多边形预设常用于头像裁剪与活动海报；生成的 CSS 值也可直接用在任意网页元素上。

「自由绘制」开启后按住鼠标在预览区画出任意轮廓，松开自动抽稀为顶点精简的多边形；随后仍可拖拽顶点、双击删除、点击边插入新点继续微调，适合从图片里抠出不规则主体。

相关工具

开发工具

JSON 格式化JSON 数据格式化、压缩、验证和自动修复 JSON 转类型JSON 一键生成 TS/Go/Rust 类型文本 Diff 对比使用 Monaco 显示文本差异 YAML 格式化YAML 数据格式化和验证 HTML 格式化HTML 代码格式化、压缩与解转义 Markdown 在线编辑工具栏快捷插入、实时预览、公式/图表渲染、导入导出、自动保存 SVG 在线编辑编辑 SVG 源码并实时预览结果 PNG 转 SVG将 PNG 包装为保持透明度的 SVG Mermaid 在线编辑编辑 Mermaid 图表并实时生成 SVG SQL 格式化SQL 语句格式化和美化 HTML 转义HTML 实体编码/解码 curl 转代码curl 命令转 fetch/axios/requests JSONPath / jq 查询JSONPath 与 jq 路径查询 CSS 生成器渐变、阴影、圆角 CSS 生成器 Flexbox 可视化Flexbox 布局可视化与 CSS 生成缓动曲线编辑器cubic-bezier 缓动曲线可视化编辑，生成 transition / animation 时间函数字体子集化按需提取字形生成 WOFF2/WOFF/TTF 子集，本地处理目录树生成器选择本地文件夹生成 tree 风格目录树文本，支持层级、排序与过滤