用 CSS clip-path 裁剪形状：六边形头像与斜切卡片实操

矩形是浏览器的默认形状。一个 div、一张 img，天生就是方的。可设计稿里偏偏到处是六边形头像、斜切的分段、带缺口的丝带。过去解决这事要么进 PS 一张张抠图，要么往 DOM 里塞 <svg> 和 <clipPath>，结构一下子乱了。其实 CSS 自己就有一个属性能干这件事：clip-path。它把一个元素按你给的几何形状裁出来，被裁掉的部分直接不显示，留下的就是非矩形的可见区域。

我第一次认真用它，是给一个「关于我们」页做六边形头像。八张方形 JPG，设计要全切成正六边形。我没动图片文件，只写了一行 CSS，八张图全部就位，后来运营换了两张照片，形状一点没破。这就是 clip-path 相比抠图最大的好处:形状写在样式里,不写死在图片里。

clip-path 的四个形状函数

clip-path 接四种形状函数，覆盖了日常九成需求:

• polygon():多边形，给一串顶点坐标，浏览器按顺序连成闭合路径。三角形、六边形、星形、斜切卡片、丝带，全靠它。
• circle():圆，给半径和圆心。适合把头像裁成正圆。
• ellipse():椭圆，横竖两个半径独立给，能压扁能拉长。
• inset():矩形内陷，从上右下左四条边各往里缩多少，还能带圆角。做斜切分隔和图片擦入动画特别顺手。

四个里 polygon() 最自由，也最值得讲清楚。

polygon 的坐标怎么连出形状

polygon() 里每个点写成 x y 一对，逗号隔开。坐标用百分比时，0% 0% 是元素左上角，100% 100% 是右下角。浏览器拿到这串点，从第一个开始按顺序连线，最后自动闭合回第一个点。

举个最小的例子，切一个顶点朝上的三角形:

.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

50% 0% 是顶边中点(尖角),100% 100% 是右下角,0% 100% 是左下角。三个点连起来就是一个等腰三角形,元素其余部分被裁掉。

斜切卡片同理,只要让四个角不再规整。一个左下角往下掉、右下角往上抬的斜面卡片:

.slanted-card {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

顶边两个点照旧贴齐,右下角收到 100% 92%,左下角留在 0 100%,底边就斜了大约 1 到 2 度。因为四个点全是百分比,这张卡片从 1440px 缩到 375px 手机都自适应,不会因为屏幕变窄而走形。六边形则是六个点:左右各一个尖、上下各两个肩,把顶点拖到合适的百分比位置即可。

手算坐标太累,拖出来更快

三角形四个点还能心算,可一旦到了五角星、八角星或者带缺口的丝带,十几个顶点的百分比坐标靠脑子凑会很折磨。这种时候用可视化工具最省事:在 /zh/t/clip-path-generator/ 里直接在预览上拖控点,每拖一下,下面那段 clip-path: 声明实时更新。预览面板挂的就是输出区那段 CSS,拖出来的形状跟上线后一模一样,不存在「预览归预览、生产归生产」的偏差。

它内置九个预设:三角形、五边形、六边形、五角星、六角星、八角星、雪佛龙箭头、长箭头、切角卡片、消息气泡。做丝带徽章时我一般从 chevron 预设起手,在右边那条边上加两个顶点,把中间那个往里拖到 85% 左右,V 形缺口就刻出来了,生成的七顶点多边形直接复制进 .ribbon 类。整个过程不用记一个坐标。

几个容易踩的坑

第一,box-shadow 别直接加在被裁的元素上。clip-path 会把阴影连着一起裁掉,阴影就消失了,得把阴影挪到父容器,或者改用 filter: drop-shadow()。

第二,动画只能在同类型、同顶点数之间补间。三顶点三角形不会平滑变成六顶点六边形,要做这种变形得把两个关键帧都写成相同顶点数,多余的点叠在一起。

第三,老 iOS(≤13)还认 -webkit-clip-path 前缀。要是 Safari 用户反馈本该是五角星的地方显示成方块,把 -webkit-clip-path 和 clip-path 两条声明都输出就稳了。

如果你裁的是头像这类批量图片,配合 /zh/t/avatar-generator/ 先生成统一规格的占位头像再套形状,整套「关于我们」网格半小时能收工。形状归 CSS 管,图片归图片管,以后换人换图都不会破形,这就是 clip-path 真正省心的地方。

---

Made by Toolora · Updated 2026-06-13