CSS clip-path 生成器

clip-path 可以把图片、卡片、按钮等元素裁剪成某种形状：形状之外的一切（包括背景和悬停区域）都会被隐藏。这个生成器可以为 16 种现成形状（三角形、多边形、星形、十字、箭头、V 形、对话气泡、circle()、ellipse() 和带圆角的 inset()）生成 clip-path 值，并可调整比例和方向，也可以检查您自己的多边形。预览会给每个顶点编号，让您看清顺序。

使用方法

1. 选择一种形状。
2. 调整其数值（倾斜度、内半径、臂宽等）、顶点数或方向。
3. 或者选择“自定义多边形”，每行输入一个“x y”顶点。
4. 复制 CSS；其中同时包含 -webkit- 行和标准行。

计算公式

clip-path: polygon(x₁ y₁, x₂ y₂, …) · circle(r at cx cy) · ellipse(rx ry at cx cy) · inset(d round r)

多边形坐标从元素左上角开始计量：x 是宽度的百分比，y 是高度的百分比。正多边形和星形按等间隔角度计算，再拉伸到铺满整个盒子。

示例

六边形有 6 个相隔 60° 的顶点，上下为平边，再拉伸到盒子大小：polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)。正八边形把每个角切在边长的 1 ÷ (2 + √2) = 29.29% 处。内半径为 50% 的 4 角星，内侧顶点位于 50 ± 17.68%，即 32.32% 和 67.68%。