首页CSS裁剪路径生成器

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-pathpolygon(50% 0%, 100% 100%, 0% 100%)
形状类型多边形

导出



说明文档

关于 CSS Clip-path 生成器

该工具用于可视化创建 clip-path 形状,支持多种图形类型、参数调节、预设模板与代码导出。

核心功能

  • 形状类型:支持 polygon、circle、ellipse、inset 等。
  • 参数编辑:可调点位、半径、内边距、圆角等关键参数。
  • 预设模板:一键应用常见裁剪形状。
  • 外观设置:支持渐变色、尺寸等预览样式调节。
  • 代码输出:生成 clip-path-webkit-clip-path 声明。

使用说明

  1. 选择形状类型。
  2. 调整对应参数(如点数、半径、中心点等)。
  3. 通过预设快速尝试不同造型。
  4. 复制生成 CSS 并应用到目标元素。

使用场景

  • 卡片、封面、头像裁剪形状设计。
  • 创意布局中的非矩形视觉区域。
  • 页面动效中图层裁剪过渡。

常见问题

为什么在某些浏览器不生效?

部分环境对 clip-path 支持不完整,建议同时输出带前缀写法并检查兼容性。

polygon 点太多会有影响吗?

点数过多会增加渲染和维护成本,建议优先使用足够表达形状的最小点集。