{}JSJSON

CSS Clip-path 生成器

可视化编辑 CSS clip-path 属性，支持 circle、ellipse、polygon、inset 四种形状，拖拽控制点实时预览裁剪效果

生成的 CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Clip-path 使用说明

形状说明

  • circle() — 圆形裁剪，参数：半径 at 圆心
  • ellipse() — 椭圆裁剪，参数：水平/垂直半径
  • polygon() — 多边形裁剪，由多个坐标点构成
  • inset() — 矩形内缩裁剪，支持圆角

使用场景

  • 图片创意裁剪效果
  • 卡片/按钮形状设计
  • CSS 动画过渡效果
  • 响应式布局遮罩