在很长一段时间里，网页的视觉世界只有一种基本形态：矩形。设计师在 Figma 里画出的斜切卡片、六边形图标、波浪分区、不规则头像，落到浏览器里往往只剩两条路——导出图片，或者写一堆 SVG。前者不可交互、不可换色、不能随主题变化；后者虽然灵活，却把样式逻辑赶出了 CSS。clip-path、shape-outside、mask 与八值 border-radius 的成熟，彻底改变了这一点：今天我们可以在纯 CSS 里画三角形、星形、气泡、波浪、切角、光圈，甚至让这些形状平滑地互相变形。本篇 40 分钟长文，从坐标系与语法讲起，穿过多边形、遮罩、文字环绕、形状动画与性能取舍，配合七个可实时交互的实验台，帮你把“形状”变成一项真正能上生产的手艺。
为什么 CSS 形状值得单独拿出来讲
先看一个真实的取舍场景。产品需要一个“斜切角”的促销标签。三种实现方式的差别如下：
/* 方案 A：切图（PNG / WebP） */
/* 缺点：无法换色、无法改圆角、无法响应主题 */
/* 缺点：高分屏需要 @2x / @3x，体积翻倍 */
/* 方案 B：SVG */
/* 优点：矢量、可换色 */
/* 缺点：与 CSS 变量、hover、transition 的联动较绕 */
/* 方案 C：clip-path（推荐） */
.tag {
background: var(--brand);
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
transition: clip-path 0.3s ease;
}
/* 一个变量控制颜色，一条属性控制形状，还能动画 */
/* 缺点：无法换色、无法改圆角、无法响应主题 */
/* 缺点：高分屏需要 @2x / @3x，体积翻倍 */
/* 方案 B：SVG */
/* 优点：矢量、可换色 */
/* 缺点：与 CSS 变量、hover、transition 的联动较绕 */
/* 方案 C：clip-path（推荐） */
.tag {
background: var(--brand);
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
transition: clip-path 0.3s ease;
}
/* 一个变量控制颜色，一条属性控制形状，还能动画 */
矢量
缩放不失真，任何 DPR 下都清晰
可变量
形状、颜色都可由 CSS 变量驱动
可动画
顶点数一致的
polygon() 之间可平滑变形
可交互
hover、focus、点击命中区域照常工作
三个核心概念，先分清
- 裁剪（clip-path）：把元素“剪”成某个形状。剪掉的部分彻底消失——不显示、不响应鼠标、不占据视觉空间。
- 遮罩（mask）：用一张“灰度图”控制元素的可见度。黑色透明、白色不透明、灰色半透明，因此可以做出渐变淡出、羽化边缘。
- 形状环绕（shape-outside）：不改元素本身的长相，只改浮动元素周围文字绕排的轮廓。它管的是“排版”，不是“外观”。
还有第四个常被忽略的家伙：八值 border-radius。用 水平半径 / 垂直半径 的斜杠语法，只靠圆角就能造出大量有机形状（也就是常说的 blob），并且它兼容性极佳、动画成本极低。
常见误解
clip-path 只是“加个效果”，不影响布局。实际上被剪掉的部分确实不再接收点击事件，这既是优点也是陷阱。
正确认知
clip-path 改变的是渲染结果与命中区域，但元素的盒模型尺寸、占据的文档流空间完全不变。
clip-path 基础语法全解
clip-path 接受一组“基本形状函数”，也可以引用 SVG 的 <clipPath>。日常开发中 95% 的场景只会用到下面五种。
/* ① inset()：从四边向内收缩，可带圆角 */
.a {
clip-path: inset(10px 20px 30px 40px);
/* 顺序：上 右 下 左，与 margin 一致 */
}
.a-round {
clip-path: inset(10% round 24px);
/* round 关键字后面跟圆角，语法同 border-radius */
}
/* ② circle()：圆形，半径 + 圆心 */
.b {
clip-path: circle(40%);
/* 省略 at，默认圆心 50% 50% */
}
.b-offset {
clip-path: circle(60px at 20% 30%);
}
.b-closest {
/* 关键字半径：closest-side / farthest-side */
clip-path: circle(closest-side at 50% 50%);
}
/* ③ ellipse()：椭圆，两个半径 */
.c {
clip-path: ellipse(45% 30% at 50% 50%);
}
/* ④ polygon()：任意多边形，逗号分隔顶点 */
.d-triangle {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.d-hexagon {
clip-path: polygon(
25% 0%, 75% 0%, 100% 50%,
75% 100%, 25% 100%, 0% 50%
);
}
/* ⑤ path()：直接使用 SVG 路径数据 */
.e {
clip-path: path('M 0,0 L 100,0 L 100,70 L 50,100 L 0,70 Z');
/* 注意：path() 里的坐标是绝对像素，不随元素缩放 */
}
.a {
clip-path: inset(10px 20px 30px 40px);
/* 顺序：上 右 下 左，与 margin 一致 */
}
.a-round {
clip-path: inset(10% round 24px);
/* round 关键字后面跟圆角，语法同 border-radius */
}
/* ② circle()：圆形，半径 + 圆心 */
.b {
clip-path: circle(40%);
/* 省略 at，默认圆心 50% 50% */
}
.b-offset {
clip-path: circle(60px at 20% 30%);
}
.b-closest {
/* 关键字半径：closest-side / farthest-side */
clip-path: circle(closest-side at 50% 50%);
}
/* ③ ellipse()：椭圆，两个半径 */
.c {
clip-path: ellipse(45% 30% at 50% 50%);
}
/* ④ polygon()：任意多边形，逗号分隔顶点 */
.d-triangle {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.d-hexagon {
clip-path: polygon(
25% 0%, 75% 0%, 100% 50%,
75% 100%, 25% 100%, 0% 50%
);
}
/* ⑤ path()：直接使用 SVG 路径数据 */
.e {
clip-path: path('M 0,0 L 100,0 L 100,70 L 50,100 L 0,70 Z');
/* 注意：path() 里的坐标是绝对像素，不随元素缩放 */
}
inset()
矩形裁切、图片内缩、带圆角的“视窗”
circle()
头像、圆形徽标、聚光灯
ellipse()
椭圆按钮、有机形状的起点
polygon()
三角形、星形、箭头、气泡——最常用
path()
复杂曲线，但坐标不随尺寸缩放，慎用
坐标系：从左上角 (0 0) 出发
理解 polygon() 的关键，是把元素想象成一块画布：左上角是 0% 0%，右下角是 100% 100%，x 轴向右、y 轴向下。顶点按顺序连接，最后一个点自动连回第一个点，因此不需要重复写起点。
/* 用坐标系拆解一个“对话气泡” */
.bubble {
clip-path: polygon(
0% 0%, /* 左上 */
100% 0%, /* 右上 */
100% 75%, /* 右侧向下 75% */
75% 75%, /* 底部水平往左 */
75% 100%, /* 小尾巴向下 */
50% 75%, /* 尾巴尖回到基线 */
0% 75% /* 左下 */
);
}
/* 顺时针还是逆时针？都行，浏览器会自动闭合 */
/* 但顺序混乱会导致图形自交，出现意想不到的镂空 */
.bubble {
clip-path: polygon(
0% 0%, /* 左上 */
100% 0%, /* 右上 */
100% 75%, /* 右侧向下 75% */
75% 75%, /* 底部水平往左 */
75% 100%, /* 小尾巴向下 */
50% 75%, /* 尾巴尖回到基线 */
0% 75% /* 左下 */
);
}
/* 顺时针还是逆时针？都行，浏览器会自动闭合 */
/* 但顺序混乱会导致图形自交，出现意想不到的镂空 */
另外一个极其常用的技巧：顶点数相同的两个 polygon() 之间可以做平滑过渡。这条规则是后面“形状变形动画”的全部基础。反过来，顶点数不同就无法插值，浏览器只会硬切。
交互实验一：clip-path 形状切换器
点击下面的按钮，观察同一个 div 如何被一条声明变成完全不同的图形。下方同步输出真实的 CSS 值，你可以直接复制到项目里。
CLIP-PATH
clip-path: inset(12% 18% 12% 18% round 24px);
观察要点：
- 切换时，顶点数相同的形状之间会平滑变形（比如五边形 → 六边形 → 星形之外的几个）；形状函数类型不同则直接跳变。
- 元素的盒子尺寸从未改变，被剪掉的部分只是不再渲染、不再接收鼠标事件。
- 文字“CLIP-PATH”在三角形、星形里会被裁掉一部分——这正是裁剪的真实行为。
用数学生成 polygon：正多边形与星形
手写六边形还好，手写十二边形就是折磨。正多边形的顶点可以用极坐标轻松算出来：
/* 正多边形顶点公式 */
/* x = 50 + r × cos(θ) */
/* y = 50 + r × sin(θ) */
/* θ = -90° + i × (360° / n) */
function buildPolygon(sides, radius, rotation) {
const points = [];
for (let i = 0; i < sides; i++) {
const angle =
(Math.PI * 2 * i) / sides
- Math.PI / 2
+ (rotation * Math.PI) / 180;
const x = 50 + radius * Math.cos(angle);
const y = 50 + radius * Math.sin(angle);
points.push(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
}
return `polygon(${points.join(', ')})`;
}
/* 星形：交替使用外半径与内半径 */
function buildStar(pointsCount, outerR, innerR) {
const pts = [];
const total = pointsCount * 2;
for (let i = 0; i < total; i++) {
const r = i % 2 === 0 ? outerR : innerR;
const angle = (Math.PI * i) / pointsCount - Math.PI / 2;
pts.push(
`${(50 + r * Math.cos(angle)).toFixed(2)}% ` +
`${(50 + r * Math.sin(angle)).toFixed(2)}%`
);
}
return `polygon(${pts.join(', ')})`;
}
/* x = 50 + r × cos(θ) */
/* y = 50 + r × sin(θ) */
/* θ = -90° + i × (360° / n) */
function buildPolygon(sides, radius, rotation) {
const points = [];
for (let i = 0; i < sides; i++) {
const angle =
(Math.PI * 2 * i) / sides
- Math.PI / 2
+ (rotation * Math.PI) / 180;
const x = 50 + radius * Math.cos(angle);
const y = 50 + radius * Math.sin(angle);
points.push(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
}
return `polygon(${points.join(', ')})`;
}
/* 星形：交替使用外半径与内半径 */
function buildStar(pointsCount, outerR, innerR) {
const pts = [];
const total = pointsCount * 2;
for (let i = 0; i < total; i++) {
const r = i % 2 === 0 ? outerR : innerR;
const angle = (Math.PI * i) / pointsCount - Math.PI / 2;
pts.push(
`${(50 + r * Math.cos(angle)).toFixed(2)}% ` +
`${(50 + r * Math.sin(angle)).toFixed(2)}%`
);
}
return `polygon(${pts.join(', ')})`;
}
这套公式的实战价值在于：形状可以由数据驱动。图表里的雷达图、技能树里的节点、游戏化的徽章，都可以根据后端返回的数值实时生成多边形。
/* 应用：根据分数生成“能力雷达”形状 */
const skills = [
{ name: 'HTML', value: 0.9 },
{ name: 'CSS', value: 0.95 },
{ name: 'JS', value: 0.8 },
{ name: '性能', value: 0.6 },
{ name: '无障碍', value: 0.7 }
];
const pts = skills.map((s, i) => {
const angle =
(Math.PI * 2 * i) / skills.length - Math.PI / 2;
const r = 45 * s.value;
return `${50 + r * Math.cos(angle)}% ` +
`${50 + r * Math.sin(angle)}%`;
});
chart.style.clipPath = `polygon(${pts.join(', ')})`;
/* 数据一变，形状立刻跟着变 —— 而且可以加 transition */
const skills = [
{ name: 'HTML', value: 0.9 },
{ name: 'CSS', value: 0.95 },
{ name: 'JS', value: 0.8 },
{ name: '性能', value: 0.6 },
{ name: '无障碍', value: 0.7 }
];
const pts = skills.map((s, i) => {
const angle =
(Math.PI * 2 * i) / skills.length - Math.PI / 2;
const r = 45 * s.value;
return `${50 + r * Math.cos(angle)}% ` +
`${50 + r * Math.sin(angle)}%`;
});
chart.style.clipPath = `polygon(${pts.join(', ')})`;
/* 数据一变，形状立刻跟着变 —— 而且可以加 transition */
顶点数固定
数据维度不变时，变形动画天然平滑
顶点数变化
需要补点（把少的那个补齐）才能插值
精度
保留两位小数即可，肉眼无法分辨
性能
改
clip-path 只影响绘制与合成，不触发布局
交互实验二：多边形实时编辑器
拖动下面的滑块，观察边数、半径、旋转角三个参数如何共同决定一个正多边形。这是理解极坐标最直观的方式。
clip-path: polygon(...);
几个值得注意的细节：
- 起始角度设为 -90°，可以让第一个顶点正好落在正上方，视觉上更“正”。
- 半径 50% 是极限，超过就会被裁掉；但如果是奇数边，某些顶点会贴边，需要适当缩小到 45% 左右。
- 旋转改变的是相位，不是形状本身。三角形旋转 180° 会变成倒三角，这是做“向上/向下箭头”的便捷方式。
- 滑块拖动时如果
transition过长，会产生“拖尾”感；把过渡控制在 0.2s 以内手感最好。
被低估的八值 border-radius：不写 clip-path 也能造形状
border-radius 有一个很多人不知道的完整语法：用斜杠 / 把水平半径和垂直半径分开写。这让每个角都可以是一个椭圆弧，而不是只能四分之一圆。
/* 基础四值语法（大多数人都知道） */
.a { border-radius: 10px 20px 30px 40px; }
/* 完整八值语法：水平 / 垂直 */
.b {
border-radius: 30% 70% 70% 30% / 30% 70% 70% 30%;
/* 斜杠前 = 水平半径，斜杠后 = 垂直半径 */
}
/* 经典“叶片 / 花瓣”形状 */
.leaf {
border-radius: 0 100% 0 100%;
}
/* 蛋形 */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* 有机 blob（配合轻微旋转效果更好） */
.blob {
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
transition: border-radius 0.8s ease-in-out;
}
.blob:hover {
border-radius: 38% 62% 58% 42% / 45% 55% 45% 55%;
}
.a { border-radius: 10px 20px 30px 40px; }
/* 完整八值语法：水平 / 垂直 */
.b {
border-radius: 30% 70% 70% 30% / 30% 70% 70% 30%;
/* 斜杠前 = 水平半径，斜杠后 = 垂直半径 */
}
/* 经典“叶片 / 花瓣”形状 */
.leaf {
border-radius: 0 100% 0 100%;
}
/* 蛋形 */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* 有机 blob（配合轻微旋转效果更好） */
.blob {
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
transition: border-radius 0.8s ease-in-out;
}
.blob:hover {
border-radius: 38% 62% 58% 42% / 45% 55% 45% 55%;
}
成本极低
圆角变化主要影响绘制，现代浏览器优化良好
兼容性好
八值语法全平台支持，无需 @supports 兜底
有机感
是 blob 形状、柔和卡片的最佳起点
动画友好
只要值的数量一致，就能平滑过渡
border-radius 与 clip-path 的分工
- 形状只需要圆角（没有直边切角）→ 用
border-radius，更简单、更稳、更省。 - 形状需要直线切角、尖角、凹口 → 用
clip-path: polygon()。 - 形状需要渐变淡出、羽化、复杂遮罩 → 用
mask。 - 需要圆角 + 切角混搭 → 两者可以叠加，但要注意裁剪顺序，
clip-path会裁掉圆角效果之外的部分。
交互实验三：blob 形状调参台
拖动四个滑块，分别控制四个角的水平与垂直半径比例，实时生成一个有机形状。这是做品牌插画、头像背景、装饰色块时最实用的方式。
border-radius: 30% 70% 70% 30% / 30% 70% 70% 30%;
把生成的形状用在头像上，只需要三步：
/* 1. 给容器加 blob 圆角 */
.avatar-blob {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
/* 2. 图片填满容器 */
.avatar-blob img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 3. 呼吸动画：两个圆角值来回切换 */
@keyframes breathe {
0%, 100% {
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
50% {
border-radius: 38% 62% 58% 42% / 45% 55% 45% 55%;
}
}
.avatar-blob {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
/* 2. 图片填满容器 */
.avatar-blob img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 3. 呼吸动画：两个圆角值来回切换 */
@keyframes breathe {
0%, 100% {
border-radius: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
50% {
border-radius: 38% 62% 58% 42% / 45% 55% 45% 55%;
}
}
shape-outside：让文字绕着形状排
这是 CSS Shapes 模块里最“反直觉”也最有用的属性。它不改变浮动元素的外观，只改变周围文字绕排的轮廓。
这是一段用于演示文字环绕效果的说明文本。默认情况下，浮动元素周围的文字会沿着它的矩形外框排列，因此即使元素本身被做成了圆形，文字依然会在四个角留下突兀的空白。开启 shape-outside 之后，浏览器会按照圆形轮廓重新计算每一行文字的可用宽度，文字便自然地沿着弧线流动起来，视觉上更紧凑、也更符合人们对“圆形”的直觉。这个属性在杂志式排版、图文混排的专题页、以及需要突出视觉主体的落地页里非常有用。它不会改变元素本身的绘制结果，也不会影响元素在文档流中占据的空间，只是单纯地重新定义了文字可以出现在哪里。
/* 基础用法：先浮动，再定义轮廓 */
.avatar {
float: left;
width: 130px;
height: 130px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
}
/* 多边形轮廓：文字绕开一个三角形 */
.triangle {
float: left;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
shape-outside: polygon(50% 0, 100% 100%, 0 100%);
}
/* 用椭圆做柔和的文字包围 */
.oval {
shape-outside: ellipse(45% 40% at 50% 50%);
shape-margin: 16px;
}
/* 从图片 alpha 通道自动提取轮廓 */
.png-shape {
shape-outside: url('star.png');
shape-image-threshold: 0.5;
}
.avatar {
float: left;
width: 130px;
height: 130px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
}
/* 多边形轮廓：文字绕开一个三角形 */
.triangle {
float: left;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
shape-outside: polygon(50% 0, 100% 100%, 0 100%);
}
/* 用椭圆做柔和的文字包围 */
.oval {
shape-outside: ellipse(45% 40% at 50% 50%);
shape-margin: 16px;
}
/* 从图片 alpha 通道自动提取轮廓 */
.png-shape {
shape-outside: url('star.png');
shape-image-threshold: 0.5;
}
circle()
头像旁的文字环绕，最常用
polygon()
配合 clip-path 使用，形状完全一致
url()
从 PNG 透明通道自动生成轮廓
前提
元素必须是 float，否则 shape-outside 无效
三个容易踩的坑：
- 必须浮动：
shape-outside只对浮动元素生效。用flex或grid布局的容器里它不起作用。 - 只影响左右两侧：文字绕排的是元素的侧边轮廓，上下方向的间距仍由
margin控制。 - shape-margin 是“留白”：它会在轮廓外再扩一圈安全距离，不加的话文字会紧贴弧线，观感很挤。
mask 遮罩：比 clip-path 更柔和的选择
clip-path 是“一刀切”，边缘锐利、非黑即白。而 mask 用灰度图控制透明度，可以做出渐变淡出、羽化边缘、局部高亮——这是裁剪做不到的。
MASK
mask-image: none;
/* ① 线性渐变遮罩：右侧淡出 */
.fade-right {
mask-image: linear-gradient(
to right, #000 60%, transparent 100%
);
}
/* ② 径向渐变：中心亮、四周暗 */
.spotlight {
mask-image: radial-gradient(
circle at 50% 50%, #000 25%, transparent 70%
);
}
/* ③ 重复渐变：斜条纹 */
.stripes {
mask-image: repeating-linear-gradient(
45deg, #000 0 14px, transparent 14px 28px
);
}
/* ④ 用多个遮罩叠加（合成模式） */
.combined {
mask-image: radial-gradient(circle at 20% 30%, #000 40%, transparent 70%),
linear-gradient(to bottom, #000, transparent);
mask-composite: intersect;
}
/* ⑤ 让遮罩动起来 */
@keyframes sweepMask {
from {
mask-position: -100% 0;
}
to {
mask-position: 200% 0;
}
}
.fade-right {
mask-image: linear-gradient(
to right, #000 60%, transparent 100%
);
}
/* ② 径向渐变：中心亮、四周暗 */
.spotlight {
mask-image: radial-gradient(
circle at 50% 50%, #000 25%, transparent 70%
);
}
/* ③ 重复渐变：斜条纹 */
.stripes {
mask-image: repeating-linear-gradient(
45deg, #000 0 14px, transparent 14px 28px
);
}
/* ④ 用多个遮罩叠加（合成模式） */
.combined {
mask-image: radial-gradient(circle at 20% 30%, #000 40%, transparent 70%),
linear-gradient(to bottom, #000, transparent);
mask-composite: intersect;
}
/* ⑤ 让遮罩动起来 */
@keyframes sweepMask {
from {
mask-position: -100% 0;
}
to {
mask-position: 200% 0;
}
}
边缘柔和
渐变遮罩天然带羽化，适合淡出、渐隐
支持图像
可以用 PNG / SVG 作为遮罩形状
可动画
mask-position / mask-size 都能过渡
成本偏高
遮罩通常需要在合成阶段额外处理，慎用于大面积
clip-path 与 mask 的选择对照
| 需求 | 推荐方案 | 原因 |
|---|---|---|
| 锐利的几何形状 | clip-path |
边缘干脆，命中区域同步裁剪，性能更好 |
| 边缘渐变淡出 | mask |
clip-path 无法表达半透明过渡 |
| 只用圆角 | border-radius |
最简单、最省、兼容性最好 |
| 文字绕排 | shape-outside |
只有它真正改变排版流 |
| 复杂曲线轮廓 | clip-path: path() |
支持贝塞尔曲线，但需注意坐标缩放问题 |
| 图片局部高亮 | mask + 径向渐变 |
光圈效果自然，且可用 mask-position 做跟随 |
让形状动起来：clip-path 的变形动画
形状动画最大的限制是：只有“同类型 + 同参数数量”的形状之间才能插值。也就是说：
polygon()→polygon()：顶点数相同才能平滑变形，不同则会硬切。circle()→ellipse()：不同函数，无法插值。inset()→inset()：可以，只要值结构一致。polygon()→polygon()且顶点数不同：需要在 JS 里把少的一方“补点”到相同数量。
上方形状由 6 个顶点的 polygon() 在多个关键帧之间循环变形
/* ✅ 正确：顶点数一致，平滑变形 */
.morph {
animation: morph 4s ease-in-out infinite alternate;
}
@keyframes morph {
0% {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
100% {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
}
/* ❌ 错误：三角形（3 点）与六边形（6 点）无法插值 */
@keyframes badMorph {
from { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
to { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* 结果：直接跳变，中间没有过渡 */
}
/* 补点技巧：把三角形的 3 个点写成 6 个点 */
/* 让每个顶点重复一次，总数就对齐了 */
.patched {
clip-path: polygon(
50% 0, 50% 0, 100% 100%,
100% 100%, 0 100%, 0 100%
);
}
.morph {
animation: morph 4s ease-in-out infinite alternate;
}
@keyframes morph {
0% {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
100% {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
}
/* ❌ 错误：三角形（3 点）与六边形（6 点）无法插值 */
@keyframes badMorph {
from { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
to { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* 结果：直接跳变，中间没有过渡 */
}
/* 补点技巧：把三角形的 3 个点写成 6 个点 */
/* 让每个顶点重复一次，总数就对齐了 */
.patched {
clip-path: polygon(
50% 0, 50% 0, 100% 100%,
100% 100%, 0 100%, 0 100%
);
}
同函数
polygon → polygon 可以插值
同顶点数
数量必须严格相等，否则硬切
补点法
重复顶点凑数，是最常用的兼容技巧
性能
形状动画走绘制 + 合成，比 transform 稍贵但可接受
缓动与节奏
形状变形动画的观感极度依赖缓动。linear 会让变形显得机械，ease-in-out 自然很多，而带轻微过冲的 cubic-bezier(0.34, 1.56, 0.64, 1) 则会带来弹性。建议时长控制在 0.6～1.5 秒之间：太短看不清形状变化，太长会让页面显得拖沓。
实战案例：五个可以直接抄走的形状套路
案例一：切角卡片
左上与右下切掉一个角，是最常见的“科技感卡片”。用 calc() 让切角保持像素尺寸，不随卡片大小变形。
.bevel-card {
background: linear-gradient(135deg, #1e3a8a, #2563eb);
padding: 22px 24px;
clip-path: polygon(
0 0,
calc(100% - 32px) 0,
100% 32px,
100% 100%,
32px 100%,
0 calc(100% - 32px)
);
}
/* 悬停时把切角放大，形成“展开”感 */
.bevel-card:hover {
clip-path: polygon(
0 0, calc(100% - 12px) 0, 100% 12px,
100% 100%, 12px 100%, 0 calc(100% - 12px)
);
transition: clip-path 0.35s ease;
}
background: linear-gradient(135deg, #1e3a8a, #2563eb);
padding: 22px 24px;
clip-path: polygon(
0 0,
calc(100% - 32px) 0,
100% 32px,
100% 100%,
32px 100%,
0 calc(100% - 32px)
);
}
/* 悬停时把切角放大，形成“展开”感 */
.bevel-card:hover {
clip-path: polygon(
0 0, calc(100% - 12px) 0, 100% 12px,
100% 100%, 12px 100%, 0 calc(100% - 12px)
);
transition: clip-path 0.35s ease;
}
PRO PLAN
切角卡片使用 polygon + calc，切角尺寸固定为 32px，不随卡片宽度变化。悬停时切角收窄到 12px，视觉上像是卡片“展开”了一点。
案例二：六边形图标阵列
六边形是图标、徽章、游戏化界面里最常见的形状。polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) 是标准的尖顶六边形。
悬停任意六边形查看交互效果
CSS
形状
裁剪
遮罩
动画
性能
/* 尖顶六边形 */
.hex {
width: 84px;
height: 94px; /* 高度 ≈ 宽度的 1.155 倍才是正六边形 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 平顶六边形 */
.hex-flat {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* 六边形无缝拼接的关键：奇偶行错位半个宽度 */
.hex-row:nth-child(even) {
margin-left: 42px; /* 宽度的一半 */
}
.hex {
width: 84px;
height: 94px; /* 高度 ≈ 宽度的 1.155 倍才是正六边形 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 平顶六边形 */
.hex-flat {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* 六边形无缝拼接的关键：奇偶行错位半个宽度 */
.hex-row:nth-child(even) {
margin-left: 42px; /* 宽度的一半 */
}
案例三：波浪分区
用 polygon() 的锯齿点模拟波浪，比 SVG 更轻、更容易改色。点数越多越平滑，但也会让代码变长——通常 8～12 个点就足够。
WAVE DIVIDER
/* 波浪底部：y 值在 62% ~ 78% 之间交替 */
.wave {
height: 90px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
clip-path: polygon(
0 0, 100% 0, 100% 62%,
88% 74%, 74% 62%, 60% 76%,
46% 62%, 32% 78%, 16% 64%, 0 76%
);
}
/* 想要更平滑的曲线？用 path() 或 SVG */
/* 但 poly() 的优势是：顶点数一致时可以动画 */
.wave {
height: 90px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
clip-path: polygon(
0 0, 100% 0, 100% 62%,
88% 74%, 74% 62%, 60% 76%,
46% 62%, 32% 78%, 16% 64%, 0 76%
);
}
/* 想要更平滑的曲线？用 path() 或 SVG */
/* 但 poly() 的优势是：顶点数一致时可以动画 */
案例四：图片聚光与渐隐
用 mask 把一张图片的右侧逐渐淡出，与背景自然融合。这是落地页里最常见的处理方式。
.hero-image {
mask-image: linear-gradient(
to right,
#000 0%, #000 55%,
rgba(0,0,0,0.4) 80%,
transparent 100%
);
}
/* 双向渐隐，两侧都柔化 */
.fade-both {
mask-image: linear-gradient(
to right,
transparent, #000 15%, #000 85%, transparent
);
}
mask-image: linear-gradient(
to right,
#000 0%, #000 55%,
rgba(0,0,0,0.4) 80%,
transparent 100%
);
}
/* 双向渐隐，两侧都柔化 */
.fade-both {
mask-image: linear-gradient(
to right,
transparent, #000 15%, #000 85%, transparent
);
}
案例五：不规则头像
把 border-radius 的八值语法与 overflow: hidden 结合，就能做出有机形状的头像框。这种处理在个人主页、团队成员页里非常出彩。
.avatar-organic {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 58% 42% 38% 62% / 46% 54% 46% 54%;
border: 3px solid #dbeafe;
}
/* 悬停时切换到另一种圆角，形成“呼吸”效果 */
.avatar-organic:hover {
border-radius: 42% 58% 62% 38% / 54% 46% 54% 46%;
transition: border-radius 0.6s ease-in-out;
}
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 58% 42% 38% 62% / 46% 54% 46% 54%;
border: 3px solid #dbeafe;
}
/* 悬停时切换到另一种圆角，形成“呼吸”效果 */
.avatar-organic:hover {
border-radius: 42% 58% 62% 38% / 54% 46% 54% 46%;
transition: border-radius 0.6s ease-in-out;
}
性能真相：形状属性到底贵不贵
形状相关属性不像 transform 那样可以“只走合成”。它们大多会进入绘制（Paint）阶段，因此性能表现取决于面积、层数、动画时长三个变量。
| 属性 | 触发阶段 | 代价 | 使用建议 |
|---|---|---|---|
border-radius（静态） |
Paint + Composite | 低 | 放心用，浏览器对圆角有专门优化 |
border-radius（动画） |
Paint + Composite | 中 | 小面积没问题，大面积长时动画需谨慎 |
clip-path（静态） |
Paint + Composite | 低 | 几乎零成本，可大量使用 |
clip-path（动画） |
Paint + Composite | 中 | 面积小、时长可控时完全可接受 |
mask-image（渐变） |
Paint + Composite | 中 | 大面积遮罩会明显增加合成开销 |
mask-image（图片） |
Paint + Composite + 解码 | 高 | 尽量用渐变替代图片遮罩 |
shape-outside |
Layout（逐行计算） | 高 | 文字行数多时开销显著，避免动画 |
filter: blur() 配合遮罩 |
Paint + Composite | 高 | 模糊半径与面积都需严格控制 |
/* ✅ 优化一：把形状动画限制在小面积元素上 */
.badge {
width: 48px;
height: 48px;
animation: morph 3s infinite alternate;
/* 小元素动画，成本可以忽略 */
}
/* ✅ 优化二：给需要裁剪的元素加隔离 */
.shaped-card {
contain: layout paint;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
/* ✅ 优化三：长时循环的形状动画加 will-change */
.looping-shape {
will-change: clip-path;
animation: morph 6s infinite alternate;
}
/* ✅ 优化四：把遮罩结果交给图片处理 */
/* 如果一张图的遮罩永远不变，直接在构建时烘焙进图片 */
/* 而不是每次渲染都让浏览器算一遍 mask */
/* ❌ 反例：给整页容器做遮罩动画 */
.page-wrapper {
mask-image: radial-gradient(circle, #000 30%, transparent 70%);
animation: pulse 2s infinite;
/* 整页重新合成，必然掉帧 */
}
.badge {
width: 48px;
height: 48px;
animation: morph 3s infinite alternate;
/* 小元素动画，成本可以忽略 */
}
/* ✅ 优化二：给需要裁剪的元素加隔离 */
.shaped-card {
contain: layout paint;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
/* ✅ 优化三：长时循环的形状动画加 will-change */
.looping-shape {
will-change: clip-path;
animation: morph 6s infinite alternate;
}
/* ✅ 优化四：把遮罩结果交给图片处理 */
/* 如果一张图的遮罩永远不变，直接在构建时烘焙进图片 */
/* 而不是每次渲染都让浏览器算一遍 mask */
/* ❌ 反例：给整页容器做遮罩动画 */
.page-wrapper {
mask-image: radial-gradient(circle, #000 30%, transparent 70%);
animation: pulse 2s infinite;
/* 整页重新合成，必然掉帧 */
}
面积优先
形状动画的成本几乎与元素面积成正比
减少层数
遮罩 + 图层提升叠加会显著放大开销
能静态就静态
装饰性形状不需要动，就别让它动
真机验证
低端安卓机是检验形状动画的唯一标准
兼容性与渐进增强
形状相关属性的兼容性整体不错，但新语法（如 mask-composite、clip-path: path() 的某些细节）在旧浏览器上仍需兜底。
/* 兼容性速查 */
/* border-radius（含八值） —— 全平台，无需担心 */
/* clip-path: inset/circle/ellipse/polygon —— 现代浏览器全面支持 */
/* clip-path: path() —— Chrome 88+ / Safari 13.1+ */
/* shape-outside —— Chrome 37+ / Safari 10.1+ / Firefox 62+ */
/* mask-image —— 现代浏览器支持，旧版需 -webkit- 前缀 */
/* mask-composite —— Chrome 120+ / Safari 15.4+ */
/* 渐进增强：先保证基础形态可用 */
.shaped {
/* 兜底：普通矩形，内容依然完整可读 */
border-radius: 12px;
}
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
.shaped {
border-radius: 0;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
}
/* 遮罩的旧前缀写法 */
.masked {
-webkit-mask-image: linear-gradient(to right, #000, transparent);
mask-image: linear-gradient(to right, #000, transparent);
}
/* JS 特性检测 */
if (CSS.supports('clip-path', 'polygon(0 0, 100% 0, 100% 100%)')) {
/* 可以安全使用多边形裁剪 */
}
/* border-radius（含八值） —— 全平台，无需担心 */
/* clip-path: inset/circle/ellipse/polygon —— 现代浏览器全面支持 */
/* clip-path: path() —— Chrome 88+ / Safari 13.1+ */
/* shape-outside —— Chrome 37+ / Safari 10.1+ / Firefox 62+ */
/* mask-image —— 现代浏览器支持，旧版需 -webkit- 前缀 */
/* mask-composite —— Chrome 120+ / Safari 15.4+ */
/* 渐进增强：先保证基础形态可用 */
.shaped {
/* 兜底：普通矩形，内容依然完整可读 */
border-radius: 12px;
}
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
.shaped {
border-radius: 0;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
}
/* 遮罩的旧前缀写法 */
.masked {
-webkit-mask-image: linear-gradient(to right, #000, transparent);
mask-image: linear-gradient(to right, #000, transparent);
}
/* JS 特性检测 */
if (CSS.supports('clip-path', 'polygon(0 0, 100% 0, 100% 100%)')) {
/* 可以安全使用多边形裁剪 */
}
border-radius
99%+
含八值语法
clip-path 基本形状
97%+
inset / circle / polygon
shape-outside
93%+
浮动元素文字环绕
mask 遮罩
92%+
旧版可能需要前缀
渐进增强的思路很简单：把形状当成“增强”，而不是“基础”。先用矩形把内容和层级搭好，确认信息完整、可点击、可读；再用 @supports 在支持的浏览器上把形状叠加上去。这样一来，即使某个浏览器完全不支持裁剪，用户看到的也只是“朴素但可用”的版本，而不是“塌掉”的页面。
无障碍与可用性：形状不能只服务于眼睛
形状是最容易“只顾好看”的一类技巧。但裁剪和遮罩会直接改变元素的命中区域，稍不注意就会制造出“看得见点不着”或“看不见却点得到”的问题。
/* ⚠️ 问题一：被裁掉的部分不再接收点击 */
.btn-clipped {
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
/* 底部的两个角点不到，小屏幕下很危险 */
}
/* ✅ 解法：用伪元素承载可点击区域 */
.btn-clipped {
position: relative;
}
.btn-clipped::after {
content: '';
position: absolute;
inset: 0; /* 覆盖整个矩形区域 */
/* 伪元素不参与裁剪，命中区域仍是完整矩形 */
}
/* ⚠️ 问题二：装饰形状被读屏软件念出来 */
/* ✅ 解法：加 aria-hidden */
<div class="decorative-blob" aria-hidden="true"></div>
/* ⚠️ 问题三：形状动画引发前庭不适 */
@media (prefers-reduced-motion: reduce) {
.clip-morph {
animation: none;
/* 保留形状，去掉变形过程 */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
}
/* ✅ 问题四：暗色主题下的对比度 */
.shaped-badge {
background: var(--brand);
color: white; /* 确保 ≥ 4.5:1 对比度 */
}
.btn-clipped {
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
/* 底部的两个角点不到，小屏幕下很危险 */
}
/* ✅ 解法：用伪元素承载可点击区域 */
.btn-clipped {
position: relative;
}
.btn-clipped::after {
content: '';
position: absolute;
inset: 0; /* 覆盖整个矩形区域 */
/* 伪元素不参与裁剪，命中区域仍是完整矩形 */
}
/* ⚠️ 问题二：装饰形状被读屏软件念出来 */
/* ✅ 解法：加 aria-hidden */
<div class="decorative-blob" aria-hidden="true"></div>
/* ⚠️ 问题三：形状动画引发前庭不适 */
@media (prefers-reduced-motion: reduce) {
.clip-morph {
animation: none;
/* 保留形状，去掉变形过程 */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
}
/* ✅ 问题四：暗色主题下的对比度 */
.shaped-badge {
background: var(--brand);
color: white; /* 确保 ≥ 4.5:1 对比度 */
}
命中区域
裁剪后务必手动确认按钮仍能被完整点击
装饰元素
纯装饰的形状加 aria-hidden，避免干扰读屏
减少动效
保留形状，关闭变形过程，兼顾美观与舒适
对比度
形状不改变文字对比度要求，仍需 4.5:1
还有一个细节：不要让形状成为唯一的语义载体。比如用颜色或形状区分“成功/失败”的徽章时，务必同时提供文字或图标，否则色盲用户无法分辨。
调试形状：DevTools 里的高效工作流
形状的调试比动画更依赖工具——因为顶点坐标是“看不见”的。掌握下面几条工作流，能省下大量试错时间。
/* 工作流一：在 Elements 面板直接改 clip-path */
/* 选中元素 → Styles → clip-path 右侧的小图标 */
/* Chrome 提供 polygon 顶点可视化编辑器，可直接拖拽 */
/* 工作流二：用 DevTools 的 shape 编辑器改圆角 */
/* border-radius 同样有可视化编辑手柄 */
/* 工作流三：临时加背景色确认裁剪范围 */
.debug-shape {
outline: 2px dashed #ef4444;
/* outline 不会被 clip-path 裁掉，可以看到原始盒子 */
}
/* 工作流四：Rendering 面板开启 Paint flashing */
/* 形状动画如果不断闪烁大面积绿色，说明重绘过重 */
/* 工作流五：用 CSS 变量抽离坐标，方便调试 */
:root {
--notch: 32px;
--wave-y-1: 62%;
--wave-y-2: 76%;
}
.wave {
clip-path: polygon(
0 0, 100% 0, 100% var(--wave-y-1),
88% var(--wave-y-2), 74% var(--wave-y-1),
60% var(--wave-y-2), 46% var(--wave-y-1),
32% var(--wave-y-2), 16% var(--wave-y-1),
0 var(--wave-y-2)
);
}
/* 选中元素 → Styles → clip-path 右侧的小图标 */
/* Chrome 提供 polygon 顶点可视化编辑器，可直接拖拽 */
/* 工作流二：用 DevTools 的 shape 编辑器改圆角 */
/* border-radius 同样有可视化编辑手柄 */
/* 工作流三：临时加背景色确认裁剪范围 */
.debug-shape {
outline: 2px dashed #ef4444;
/* outline 不会被 clip-path 裁掉，可以看到原始盒子 */
}
/* 工作流四：Rendering 面板开启 Paint flashing */
/* 形状动画如果不断闪烁大面积绿色，说明重绘过重 */
/* 工作流五：用 CSS 变量抽离坐标，方便调试 */
:root {
--notch: 32px;
--wave-y-1: 62%;
--wave-y-2: 76%;
}
.wave {
clip-path: polygon(
0 0, 100% 0, 100% var(--wave-y-1),
88% var(--wave-y-2), 74% var(--wave-y-1),
60% var(--wave-y-2), 46% var(--wave-y-1),
32% var(--wave-y-2), 16% var(--wave-y-1),
0 var(--wave-y-2)
);
}
可视化编辑
Chrome 的 clip-path / border-radius 编辑器
outline 调试
用 outline 看原始盒子，用 background 看裁剪结果
变量抽离
把坐标写成 CSS 变量，改一处全局生效
在线工具
clip-path 生成器可以大幅缩短试错时间
常见症状与对应诊断
- 形状完全没生效 → 检查
clip-path是否被更高优先级覆盖，或shape-outside的元素是否忘了float。 - 形状生效但位置偏移 → 多半是
transform或padding参与了坐标系计算，先确认元素的盒模型。 - 文字被裁掉一半 → 这是裁剪的正常行为，把容器留出足够的内边距，或把文字放到裁剪容器之外。
- 变形动画变成硬切 → 顶点数不一致，用补点法对齐。
- 遮罩在 Safari 上失效 → 补上
-webkit-mask-image前缀。 - 形状动起来很卡 → 检查面积是否过大、是否同时叠加了模糊与遮罩。
形状与裁剪最佳实践清单
把全文的结论浓缩成一份可以直接贴在工位上的清单。
- 先想清楚要的是“裁剪”还是“遮罩”：锐利边缘用
clip-path，渐变羽化用mask。 - 只用圆角就能搞定的，别用 clip-path：八值
border-radius更简单、更稳、更省。 - 顶点数一致才能变形：形状动画前先对齐
polygon()的点数。 - 用极坐标公式生成多边形：不要手写十二边形的坐标。
- 切角用 calc() 保持像素尺寸：避免不同宽度下切角被拉伸变形。
- 把坐标抽成 CSS 变量：一处修改，全局生效，调试效率翻倍。
- shape-outside 只对浮动元素生效：别忘了
float和shape-margin。 - 裁剪会改变命中区域：按钮、链接这类可交互元素务必验证点击范围。
- 装饰形状加 aria-hidden：不要让读屏软件念出无意义的形状容器。
- 尊重 prefers-reduced-motion：保留形状，关闭变形过程。
- 控制形状动画的面积与时长的乘积：小元素可以随便动，大容器要克制。
- 长时循环动画加 will-change：短时交互动画反而不要加。
- 用 @supports 做渐进增强：形状是加分项，不是可用性的前提。
- 在低端真机上验证：桌面端看不出差异，手机上才见真章。
/* 一套可直接复用的形状工具箱 */
/* 1. 常用形状变量 */
:root {
--shape-triangle: polygon(50% 0%, 100% 100%, 0% 100%);
--shape-hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
--shape-hexagon-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
--shape-star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
--shape-arrow: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
--shape-bubble: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
--shape-blob: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
/* 2. 通用形状工具类 */
.shape-triangle { clip-path: var(--shape-triangle); }
.shape-hexagon { clip-path: var(--shape-hexagon); }
.shape-star { clip-path: var(--shape-star); }
.shape-blob { border-radius: var(--shape-blob); }
/* 3. 切角卡片 */
.bevel {
--notch: 28px;
clip-path: polygon(
0 0,
calc(100% - var(--notch)) 0,
100% var(--notch),
100% 100%,
var(--notch) 100%,
0 calc(100% - var(--notch))
);
}
/* 4. 形状变形动画（顶点数一致） */
.morph-shape {
animation: shapeMorph 5s ease-in-out infinite alternate;
}
@keyframes shapeMorph {
0% { clip-path: var(--shape-hexagon); }
100% { clip-path: var(--shape-hexagon-flat); }
}
/* 5. 文字环绕圆形头像 */
.avatar-float {
float: left;
width: 120px;
height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 14px;
}
/* 6. 无障碍降级 */
@media (prefers-reduced-motion: reduce) {
.morph-shape {
animation: none;
clip-path: var(--shape-hexagon);
}
}
/* 7. 局部隔离，控制重绘范围 */
.shaped-card, .shaped-badge {
contain: layout paint;
}
/* 1. 常用形状变量 */
:root {
--shape-triangle: polygon(50% 0%, 100% 100%, 0% 100%);
--shape-hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
--shape-hexagon-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
--shape-star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
--shape-arrow: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
--shape-bubble: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
--shape-blob: 62% 38% 46% 54% / 55% 47% 53% 45%;
}
/* 2. 通用形状工具类 */
.shape-triangle { clip-path: var(--shape-triangle); }
.shape-hexagon { clip-path: var(--shape-hexagon); }
.shape-star { clip-path: var(--shape-star); }
.shape-blob { border-radius: var(--shape-blob); }
/* 3. 切角卡片 */
.bevel {
--notch: 28px;
clip-path: polygon(
0 0,
calc(100% - var(--notch)) 0,
100% var(--notch),
100% 100%,
var(--notch) 100%,
0 calc(100% - var(--notch))
);
}
/* 4. 形状变形动画（顶点数一致） */
.morph-shape {
animation: shapeMorph 5s ease-in-out infinite alternate;
}
@keyframes shapeMorph {
0% { clip-path: var(--shape-hexagon); }
100% { clip-path: var(--shape-hexagon-flat); }
}
/* 5. 文字环绕圆形头像 */
.avatar-float {
float: left;
width: 120px;
height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 14px;
}
/* 6. 无障碍降级 */
@media (prefers-reduced-motion: reduce) {
.morph-shape {
animation: none;
clip-path: var(--shape-hexagon);
}
}
/* 7. 局部隔离，控制重绘范围 */
.shaped-card, .shaped-badge {
contain: layout paint;
}
形状与裁剪的价值，不在于“我能做出一个三角形”，而在于把视觉语言真正交还给 CSS。当颜色由变量控制、形状由公式生成、变形由数据驱动、降级由 @supports 兜底时，你会发现那些原本必须依赖设计稿切图的细节，suddenly 变成了可维护、可测试、可主题化的代码。这正是一个成熟前端工程该有的样子。
最后提醒一句：形状是有“重量”的。它不像 transform 那样可以完全交给 GPU，每一次裁剪、每一层遮罩都会参与绘制。所以请始终问自己一个问题——这个形状，是不是真的值得被画出来？如果答案是肯定的，那就大胆地用；如果不是，那再漂亮的图形，也只是给用户的设备增加负担而已。
张玥
资深前端工程师，专注于现代Web开发技术，CSS Grid布局专家，热爱分享前端开发技巧和最佳实践。