◇

CSS clip-path 生成器

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

文件始终留在此设备上

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

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

形状

输出

试试完整示例

选择六边形即可得到 clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);。每一对数值是元素内部的 x 和 y 位置，因此形状会随元素的宽度和高度伸缩。

裁剪会隐藏元素的一部分，但保留其布局框：相邻元素不会移动，被隐藏的角也不再响应点击。边框和盒阴影同样会被裁掉；如需阴影，请给外层容器加 drop-shadow 滤镜。

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

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

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

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

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