✂️
CSS 裁剪路径生成器
可视化拖拽生成 clip-path 多边形/圆形/箭头等形状，实时预览并复制 CSS。
本地处理 · 不上传
加载工具中…
相关：clip-path · 裁剪 · 形状 · 多边形 · css
CSS 裁剪路径生成器通过可视化拖拽生成 clip-path 属性值，支持多边形、圆形、椭圆与内嵌矩形，实时预览并输出可直接使用的 CSS 代码。
使用步骤
- 选择裁剪形状类型
- 拖拽控制点调整轮廓
- 实时查看预览效果
- 复制生成的 CSS 代码
使用场景
- 制作斜切边角的卡片或横幅
- 实现不规则形状的图片裁剪
- 制作箭头与标签形状
- 配合动画做形变过渡
小贴士
- 坐标用百分比而非像素，裁剪区域才能随元素尺寸自适应缩放。
- 被裁掉的区域不响应鼠标事件，用 clip-path 做按钮形状时点击热区会同步变化。
- clip-path 只裁剪显示范围，不改变元素在文档流中占据的盒子尺寸，周围布局不受影响。
常见问题
和 border-radius 有什么区别？
border-radius 只能做圆角，clip-path 可以裁出任意多边形。此外 clip-path 会同时裁剪元素的可点击区域，border-radius 在部分浏览器中不会。
能做动画吗？
可以，但要求前后的多边形顶点数量相同，浏览器才能逐点插值。顶点数不同的形状之间无法平滑过渡。
兼容性如何？
现代浏览器普遍支持基本形状与多边形。老版本浏览器不支持时元素会完整显示而非消失，属于安全降级。
CSS 裁剪路径生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 裁剪路径生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。