CSS Clip-Path生成器 - 在线裁剪形状代码

核心术语

在使用 CSS Clip-Path 生成器之前，了解以下核心术语将帮助您更好地掌握工具的使用方法和裁剪技术的原理。

clip-path

clip-path 是 CSS Masking Module Level 1 规范中定义的属性，用于创建元素的裁剪区域。只有在裁剪区域内的部分才会被显示，区域外的部分则被隐藏。它支持多种函数形式，包括 polygon()、circle()、ellipse()、inset() 和 path()。与传统的 overflow:hidden 不同，clip-path 可以创建任意形状的裁剪区域，而不仅仅是矩形。

polygon（多边形）

polygon 是 clip-path 最常用的函数形式，通过指定一系列顶点坐标来定义多边形的形状。语法为 clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)，其中坐标值可以使用百分比、像素或其他 CSS 长度单位。多边形支持任意数量的顶点，可以创建三角形、五角星、箭头等各种复杂形状。在本工具中，坐标值以百分比形式表示，范围为 0% 到 100%。

circle（圆形）

circle() 函数通过指定圆心位置和半径来定义圆形裁剪区域。语法为 clip-path: circle(radius at centerX centerY)。半径和圆心坐标都可以使用百分比或长度单位。当半径设置为 50% 且圆心位于元素中心时，可以实现完美的圆形裁剪效果，常用于创建圆形头像。

ellipse（椭圆）

ellipse() 函数通过分别指定水平半径、垂直半径和圆心位置来定义椭圆裁剪区域。语法为 clip-path: ellipse(radiusX radiusY at centerX centerY)。与 circle 不同，ellipse 允许水平和垂直方向有不同的半径值，因此可以创建各种扁平或拉伸的椭圆形状。

inset（内缩）

inset() 函数通过在元素边缘向内缩进指定距离来定义矩形裁剪区域。语法为 clip-path: inset(top right bottom left round borderRadius)。它特别适合创建带有圆角的矩形裁剪效果。与直接设置 border-radius 不同，inset 裁剪会真正裁剪掉元素的内容，而 border-radius 只是视觉上的圆角。

坐标系统

clip-path 使用的坐标系统以元素的左上角为原点 (0%, 0%)，右下角为 (100%, 100%)。X 轴从左到右递增，Y 轴从上到下递增。理解这个坐标系统是正确使用 clip-path 的基础。在本工具的画布上，您可以直接看到每个顶点的百分比坐标值。

顶点（Vertex）

顶点是多边形裁剪路径中的关键控制点，每个顶点由一对 X 和 Y 坐标定义。多边形的形状完全由其顶点的位置决定。在本工具中，您可以通过拖拽来调整顶点位置，也可以直接输入精确的坐标值。顶点的数量决定了多边形的复杂程度——顶点越多，可以创建的形状越复杂。

Vendor Prefix（浏览器前缀）

浏览器前缀是为了在 CSS 标准尚未完全稳定时，让浏览器厂商能够实验性地支持新特性。对于 clip-path，Safari 浏览器目前仍然需要 -webkit- 前缀（即 -webkit-clip-path）才能正常工作。本工具在生成代码时会自动包含这个前缀，确保跨浏览器兼容性。

裁剪路径与布局

clip-path 的一个重要特性是它只影响元素的视觉呈现，不影响其布局占位。也就是说，即使一个元素被裁剪成了圆形，它在文档流中仍然占据原始的矩形空间。这一点与 overflow:hidden 类似，但 clip-path 的优势在于它可以创建非矩形的裁剪区域。理解这个特性对于正确布局页面元素非常重要。