裁剪路径生成器

概述

CSS clip-path 属性让你把元素裁成自定义形状——三角形、六边形、箭头、不规则形或任意多边形——无需编辑图片。它是不用额外文件就添加非矩形设计的强大方式。由于手写坐标很繁琐，此 clip-path 生成器让你可视化地拖动点，并把确切的 CSS 复制到你的浏览器中。

使用步骤

1. 1

   选择或绘制形状

   从预设（三角形、六边形、圆）开始，或放置点来定义自定义多边形。

2. 2

   拖动这些点

   在实时预览中移动各角，直到形状看起来合适。

3. 3

   复制 clip-path CSS

   把生成的 clip-path 值粘贴到你的元素上，将其裁成该形状。

工作原理

你选择或绘制一个形状，工具便用 clip-path 定义它——通常是百分比坐标的 polygon()，或 circle()、ellipse() 之类的预设。形状之外的一切都变透明，因此元素只在轮廓内显示。你在实时预览中拖动这些点，工具便写出对应的 clip-path 值，供你粘贴到任意元素上。

什么时候用

把图片或区块裁成带角度或几何的形状。在页面区块之间做一条斜向分隔。制作六边形头像或徽章。为标注添加箭头或对话气泡形状。设计非矩形的首屏或卡片。学习多边形坐标如何映射到可见形状。

常见问题