CSS裁剪路径ClipPath可视化生成工具

可视化拖拽编辑clip-path,制作异形多边形、圆形、椭圆、内嵌裁切,支持图片预览,一键复制CSS裁剪代码,前端异形卡片、装饰图形快速制作

选择基础形状
圆形
椭圆
内嵌矩形
多边形
快捷预设图形
实时预览区域
纯色预览
图片裁切
参数调节面板
4

拖动预览框内节点,自由修改多边形轮廓

生成ClipPath代码
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
📖 使用说明 | ClipPath在线可视化编辑器

本在线clip-path生成器用于快速制作CSS不规则裁剪图形,无需手写clip-path多边形坐标,可视化调整形状,一键复制css裁剪代码,用于网页异形div、异形卡片、banner装饰图形、图片裁切效果开发。

  • 选择基础形状:支持圆形、椭圆、内嵌矩形、多边形四种基础裁剪模式;多边形模式支持拖拽顶点自由变形,可修改顶点数量制作多角图形。
  • 快捷预设图形:内置爱心、五角星、箭头、六边形、平行四边形等常用clip-path预设,点击即可一键套用形状,快速生成多边形clip-path代码。
  • 预览切换:纯色预览用来查看形状轮廓;图片裁切模式上传本地图片,实时预览图片裁剪效果,调试图片clip-path裁切样式。
  • 参数调节:圆形/椭圆/内嵌矩形可拖动滑块调整半径、位置、缩进和圆角;多边形模式直接拖动预览框内节点自由修改轮廓坐标。
  • 复制代码:调整满意后,点击复制CSS代码,直接粘贴到项目css样式内使用,支持所有现代浏览器clip-path属性。

适用场景:网页异形卡片、异形按钮、banner不规则装饰、图片不规则裁剪、SVG替代简易图形,前端页面clip-path多边形裁剪开发。

操作完成