◇

CSS clip-path 生成器

将元素裁剪成常见形状并复制 clip-path CSS。

文件始终留在此设备上

文件在浏览器中处理，绝不上传。网站会下载运行工具所需的代码和资源。无需账号，也无追踪。

使用“下载”将此工具保存为单个 HTML 文件，以便离线使用。

形状

输出

关于此工具

选择一种形状，立即用对应的 clip-path 规则裁剪预览框，然后复制可直接使用的 CSS。预览实时更新，完全在你的浏览器中运行。

多边形 clip-path 是如何工作的？

每个点都是相对于裁剪框的 x y 百分比坐标对；浏览器按顺序连接这些点，只显示轮廓内部的区域。

所有浏览器都支持 clip-path 吗？

多边形、圆形、椭圆和内嵌（inset）形状在所有现代浏览器中都受支持，因此生成的 CSS 无需添加前缀即可使用。