CSS 裁剪路径生成器

可视化生成 CSS clip-path 形状。从预设中选择或自定义——圆形、椭圆、多边形、内嵌。即时复制即用 CSS。100% 免费纯前端。

半径 50%

位置 X 50%

位置 Y 50%

预览

Clip Path Preview

CSS 代码

clip-path: circle(50% at 50% 50%);

关于 CSS 裁剪路径生成器

CSS 裁剪路径生成器是一个可视化工具，用于使用 CSS clip-path 属性创建自定义形状。无需手动编写复杂的多边形坐标，您可以从各种预设形状中选择并实时自定义参数。clip-path 属性允许您将元素裁剪为基本形状或多边形，非常适合创建独特的布局、图像遮罩和创意网页设计。所有处理都在您的浏览器中进行——数据不会发送到任何地方。

功能特点

13 种内置形状预设，包括圆形、椭圆、内嵌和多边形
实时视觉预览，支持实时形状渲染
可调整的圆形半径、椭圆轴和内嵌偏移参数
预定义多边形形状：三角形、六边形、星形、箭头等
可复制使用的 CSS 输出，立即在项目中使用
100% 纯前端——零数据传输

常见问题

什么是 CSS clip-path？

CSS clip-path 属性创建一个裁剪区域，定义应显示元素的哪一部分。区域内的部分显示，区域外的部分隐藏。它可以使用圆形(circle)、椭圆(ellipse)等基本形状，圆角矩形(inset)函数，或多边形(polygon)创建自定义多点形状。

clip-path 在所有浏览器中都有效吗？

带有基本形状（圆形、椭圆、内嵌、多边形）的 clip-path 在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器，您可能需要提供回退布局。当前浏览器版本不再需要 -webkit- 前缀。

我可以在图像上使用 clip-path 吗？

可以。clip-path 可以应用于任何 HTML 元素，包括图像、div、视频和 iframe。它通常用于创建圆形头像、六边形图片库、对角线分隔线和其他创意布局。

clip-path 和 border-radius 有什么区别？

border-radius 只将矩形元素的角变圆，根本上它仍然是矩形。clip-path 可以创建任意形状，包括三角形、星形和自定义多边形，通过完全隐藏元素的某些部分。对于圆角矩形以外的复杂形状，clip-path 是最佳工具。