CSS shape()函数怎么用？2026原生CSS复杂图形裁剪与clip-path实战教程

什么是CSS shape()函数？

shape()是现代CSS新增的复杂形状定义函数，主要用于clip-path、offset-path以及相关形状能力。相比传统的polygon()和path()，shape()使用更加接近CSS的语法描述路径，同时支持百分比、px、rem、calc()等CSS单位，因此特别适合制作响应式复杂图形。MDN目前已经将shape()标记为Baseline 2026，现代浏览器从2026年2月开始具备较好的支持，但旧浏览器仍需要考虑兼容性。

最常见的使用方式是配合clip-path：

.card {
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% 80%,
    line to 50% 100%,
    line to 0 80%,
    close
  );
}

这里的from定义起点，line to绘制直线，close负责闭合路径。最终元素只有路径内部区域可见。

shape()实现三角形和多边形

传统的三角形通常使用polygon()：

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

使用shape()后，可以采用更直观的路径命令：

.triangle {
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 50% 100%,
    close
  );
}

shape()的优势在于路径可以继续添加曲线、圆弧以及相对移动等命令，因此复杂度远高于简单的多边形裁剪。

使用curve制作波浪形

shape()真正有价值的地方是曲线。下面制作一个波浪形底部：

.wave {
  width: 100%;
  height: 300px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);

  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% 80%,
    curve to 75% 90% with 90% 70% / 85% 100%,
    curve to 50% 80% with 65% 80% / 60% 70%,
    curve to 25% 90% with 40% 100% / 30% 70%,
    curve to 0 80% with 15% 70% / 10% 100%,
    close
  );
}

其中curve to用于创建贝塞尔曲线，通过调整控制点，就可以制作波浪、弧形、气泡等视觉效果。

shape()制作心形

心形也是shape()非常典型的应用：

.heart {
  width: 240px;
  height: 220px;
  background: crimson;

  clip-path: shape(
    from 50% 90%,
    curve to 5% 30% with 20% 100% / 0% 65%,
    arc to 25% 10% of 30%,
    arc to 50% 30% of 30%,
    arc to 75% 10% of 30%,
    arc to 95% 30% of 30%,
    curve to 50% 90% with 100% 70% / 80% 100%,
    close
  );
}

除了curve之外，arc可以绘制圆弧路径。官方示例也使用arc和curve组合实现心形裁剪。

shape()和path()有什么区别？

path()同样可以用于clip-path，但是它采用类似SVG Path的字符串语法，例如：

.box {
  clip-path: path("M100 0 L200 200 L0 200 Z");
}

shape()则可以写成：

.box {
  clip-path: shape(
    from 50% 0,
    line to 100% 100%,
    line to 0 100%,
    close
  );
}

最大的区别是shape()支持百分比以及更多CSS单位，因此元素尺寸发生变化时，图形能够更自然地跟随容器缩放；同时还可以结合calc()、CSS变量等能力。path()在实际使用中则更偏向固定坐标路径。

2026年使用shape()需要注意什么？

首先要考虑浏览器兼容性。虽然shape()已经进入现代浏览器的Baseline 2026范围，但旧设备和旧浏览器仍可能无法识别。因此可以通过@supports提供降级方案：

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

@supports (clip-path: shape(from 0 0, line to 100% 0)) {
  .card {
    clip-path: shape(
      from 0 0,
      line to 100% 0,
      line to 100% 80%,
      line to 50% 100%,
      line to 0 80%,
      close
    );
  }
}

此外，clip-path会创建新的层叠上下文，实际项目中还需要注意z-index、阴影以及超出裁剪区域内容的显示效果。

总结

CSS shape()让复杂图形不再必须依赖SVG或图片资源，通过clip-path即可使用原生CSS制作波浪背景、卡片切角、心形、曲线按钮以及各种不规则UI组件。相比polygon()，它支持曲线和圆弧。相比path()，它更适合响应式布局和现代CSS计算。

对于2026年的前端项目，如果目标浏览器环境允许，shape()值得作为复杂CSS图形制作的新方案使用。