CSS 裁剪路径

学习clip-path · 难度：高级 · +15XP

CSS 裁剪路径 clip-path

clip-path 属性可以裁剪元素的可显示区域，只显示裁剪路径内部的部分。它可以创建圆形、多边形、椭圆等非矩形形状，为网页设计带来独特的视觉效果。

基本形状函数

函数	语法	说明
circle()	circle(半径 at 圆心x 圆心y)	圆形裁剪
ellipse()	ellipse(rx ry at cx cy)	椭圆裁剪
inset()	inset(上 右 下 左 round 圆角)	矩形内裁剪
polygon()	polygon(x1 y1, x2 y2, ...)	多边形裁剪
path()	SVG 路径	复杂形状裁剪

基本用法

/* 圆形 — 适合头像 */
.avatar {
  clip-path: circle(50% at 50% 50%);
  /* 圆心在元素中心，半径为 50% */
}
/* 椭圆 */
.ellipse-clip {
  clip-path: ellipse(40% 50% at 50% 50%);
}
/* 内嵌矩形 — 离四周 20px，圆角 10px */
.inset-clip {
  clip-path: inset(20px 20px 20px 20px round 10px);
}
/* 三角形 — 经典的 CSS 三角形 */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

polygon() 多边形

polygon() 是最灵活的函数，可以创建任意形状：

/* 菱形 */
.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* 五边形 */
.pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* 六边形 */
.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* 箭头 */
.arrow {
  clip-path: polygon(
    0% 20%, 60% 20%, 60% 0%,
    100% 50%, 60% 100%, 60% 80%,
    0% 80%
  );
}

动画过渡

clip-path 支持平滑过渡，但要求关键帧的顶点数量相同：

.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s ease;
}
.reveal.visible {
  clip-path: inset(0 0 0 0);
}
/* 形状变换 */
.button {
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.button:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

文本揭示效果

.text-reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.8s ease;
}
.text-reveal.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

实用场景

1. 头像裁剪：圆形、圆角方形等非矩形头像
2. 装饰性背景：倾斜分割、波浪形区域
3. 悬停效果：鼠标悬停时裁剪形状变化
4. 页面过渡：全屏裁剪揭示动画
5. 图片遮罩：按特定形状显示图片

注意事项

• 裁剪不影响元素的布局空间（元素仍占据原始空间）
• box-shadow 会被裁剪掉，如需阴影使用 filter: drop-shadow()
• 裁剪区域外不可见，不可交互
• 使用百分比坐标相对于元素自身宽高
• 在线生成器推荐：Clippy（可交互生成 polygon）

clip-path 是 CSS 中最具创意的属性之一，掌握它能让你的网页设计摆脱矩形的束缚，创造出令人印象深刻的视觉效果。