◇

CSS clip-path 生成器

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

形状

输出

关于此工具

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

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

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

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

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