CSS 裁剪路径生成器

工具介绍

clip-path 是一个 CSS 属性，用来隐藏元素定义区域以外的所有内容，只显示区域内的部分——元素本身的盒子在布局上依然存在，只是没有被绘制出来。它接受 circle()、ellipse()、inset() 等基础形状函数，还有 polygon()，后者可以传入任意一组 x/y 坐标点，画出任何直边形状。

polygon() 的坐标是手写起来最麻烦的部分——五边形、六边形或星形都需要好几个精确定位的点，随便错一个整个形状就会变形。这个工具会根据形状预设自动帮你算好这些坐标，实时更新预览，并给出可以直接复制的 clip-path CSS。

来源：CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C —— 定义 clip-path 及其基础形状函数的规范。

为什么使用它？

• 实时预览会把预览框真实裁剪成选定的形状，而不是只能靠坐标想象效果。
• 圆形、椭圆、三角形、五边形、六边形、星形、圆角矩形七种形状预设，覆盖了绝大多数 clip-path 使用场景，不用手写 polygon 坐标点。
• 圆形、椭圆和圆角矩形预设都带有大小/圆角滑块，不用改坐标也能微调形状。
• 生成标准的 clip-path CSS，可以直接贴到任意元素上使用。
• 全部在浏览器本地计算，你调整的任何参数都不会上传。免费、不用注册，手机上也能用。

使用方法

1. 从下拉菜单里选一个形状——圆形、椭圆、三角形、五边形、六边形、星形，或圆角矩形。
2. 圆形、椭圆和圆角矩形可以用大小/圆角滑块微调裁剪效果。
3. 改变形状或滑块时，预览框会实时更新。
4. 复制生成的 clip-path CSS，粘贴到需要裁剪的元素上。
5. 如果要裁剪图片而不是纯色块，把同样的 clip-path 属性用在 <img> 标签或带 background-image 的元素上即可。

示例

输入

形状：六边形

输出

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

标准六边形裁剪，常用于徽章风格的头像或功能图标。

基础形状 vs polygon()

圆形、椭圆和 inset（圆角矩形）是 CSS 内置的基础形状函数，语法很简单——一两个半径值，加上可选的中心位置或圆角。三角形、五边形、六边形和星形不是内置形状，都要用 polygon() 表示，本质是一串描出形状轮廓的 x/y 坐标点。这个工具会自动帮你算好正多边形（各边均匀分布）和五角星的坐标，这正是手写时最费劲的部分。

常见的 clip-path 用法

• 圆形头像或徽章：中等半径的 circle()，通常配合方形的原始图片，避免圆形被拉伸成椭圆。
• 斜角分割区块：用自定义 polygon（这里没有预设）把整个宽度区块的顶边或底边斜切，做出非矩形的页面分隔效果。
• 星形评分图标或徽章形状：用星形预设，比手绘 SVG 更适合简单场景。
• 六边形图片网格：把裁剪成六边形的图片排成蜂窝布局，作品集/团队页面常见的样式。
• 圆角矩形作为 border-radius 的轻量替代：当需要同时裁掉溢出的子元素内容时，单靠 border-radius 是裁不掉子元素的，还需要额外加 overflow: hidden。

配合其他 CSS 工具一起用

clip-path 经常和 CSS 渐变搭配，用作被裁剪的背景；也常和应用在外层包裹元素上的 box-shadow 搭配（因为 clip-path 也会裁掉元素本身的阴影，所以想让裁剪后的形状看起来还带浮起效果，通常的做法是把阴影加在没有被裁剪的父元素上）。

→ CSS 渐变生成器 · 圆角生成器 · 盒阴影生成器

常见问题