CSS clip-path 生成器

CSS clip-path 生成器: 用途

选择一个现成形状（三角形、菱形、六边形、五边形、星形、箭头、对话框、切角、平行四边形、圆形或椭圆），并在预览中拖动控制点调整。坐标使用百分比，因此裁剪适用于任意尺寸。

用你的照片试一试，然后复制现成的 clip-path 代码行。

使用方法

1. 选择一个形状。
2. 拖动控制点调整，并用照片测试。
3. 复制 clip-path 并用于 CSS。

使用场景

• 网站中形状各异的照片。
• 带斜角的区块。
• 仅用 CSS 制作徽章、箭头和气泡。

常见问题

什么是 clip-path？

这是一个 CSS 属性，只显示元素位于某个形状内的部分。图片在文件中依然完整；只是形状之外的部分被隐藏。

所有浏览器都支持吗？

支持。polygon()、circle() 和 ellipse() 在当前所有浏览器中都可用，无需前缀。

可以做动画吗？

可以，在点数相同的两个 polygon() 之间，对 clip-path 使用 transition 或 animation。各点会从一个形状平滑地移动到另一个形状。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具