CSS clip-path 生成器

从预设形状开始，或直接拖动多边形的点来创建您自己的裁剪形状，并获取对应的 CSS clip-path 代码，同时实时预览。一切都在您的浏览器中完成，不会向服务器发送任何内容。

形状：

在预览中拖动白色的点来调整形状，或在下方添加/删除点。

CSS 代码

工作原理

CSS 属性 clip-path 会按照由一组点定义的形状裁剪元素，这些点以元素宽度和高度的百分比表示。本工具提供常用的现成形状（三角形、六边形、丝带、星形等），也可以用鼠标或手指拖动每个点，绘制完全自定义的裁剪形状。

为什么坐标用百分比表示？

使用百分比而不是像素，可以让裁剪形状具备响应式：它会自动适应所应用元素的实际尺寸，而固定数值则会在不同屏幕上使裁剪形状变形。

clip-path 适用于所有图片和视频吗？

适用。clip-path 在所有现代浏览器中都可应用于大多数 HTML 元素，包括图片、视频、按钮和容器；不过请在布局中留出安全余量，因为位于裁剪形状之外的内容虽然不可见，但仍会占据其原本的位置。

100% 本地处理：多边形的绘制和生成的代码都完全保留在您的浏览器中。