CSS shape()函数详解：2026现代CSS实现复杂图形的实战技巧

在传统CSS中，如果需要实现复杂图形，通常会使用 clip-path: polygon()、SVG或者 path()。shape() 则提供了一种更加符合现代CSS开发习惯的解决方案，可以直接在CSS中使用路径命令创建复杂形状。

截至2026年，shape() 已进入 Baseline 2026，最新版本的主流浏览器已经开始提供支持。它可以用于 clip-path、offset-path，并在最新规范中扩展到 border-shape 等场景。

最简单的例子是创建一个三角形：

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

这里的 from 定义起点，line to 绘制直线，close 则将路径闭合。

shape()的基本语法

shape() 的基本结构如下：

shape(from <起点>, <形状命令>);

其中 from 用于设置路径起点，后面可以连续使用多个命令定义图形。常见命令包括 move、line、hline、vline、curve、smooth、arc 和 close。

例如，使用水平线和垂直线创建一个简单形状：

.box {
  clip-path: shape(
    from 10px 10px,
    hline by 180px,
    vline by 100px,
    hline by -180px,
    close
  );
}

to 表示使用参考盒中的绝对坐标，而 by 表示相对于当前路径位置移动。与此同时，shape() 支持百分比、px、rem、em 等CSS单位，这也是它相比传统 path() 非常重要的优势。

使用curve()实现曲线图形

复杂网页设计经常需要圆润的曲线，例如波浪形卡片、弧形图片和不规则按钮。curve 可以通过控制点创建贝塞尔曲线。

.hero {
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    curve to 100% 80% with 70% 20% / 100% 50%,
    line to 0 100%,
    close
  );
}

相比直接使用SVG路径，这种写法更加容易阅读和维护，而且可以结合CSS数学函数进行动态计算。

使用arc()创建圆弧

arc 适合制作圆弧、弧形卡片以及更加复杂的几何图形：

.avatar {
  clip-path: shape(
    from 10% 50%,
    arc to 90% 50% of 50% cw,
    arc to 10% 50% of 50% cw,
    close
  );
}

通过 cw、ccw、large、small 等参数，可以控制圆弧方向和弧线大小。arc() 本质上可以在起点和终点之间生成椭圆弧，因此比单纯的 border-radius 更灵活。

shape()与polygon()、path()有什么区别？

如果只是制作三角形、梯形等简单多边形，polygon() 仍然非常方便。如果项目已经大量使用SVG路径，也可以继续使用 path()。

shape() 的优势在于它结合了CSS的语法和单位系统，不仅可以使用百分比和 rem 等单位，还能够使用 calc()、CSS变量等数学能力。因此，当设计需要根据容器尺寸自适应时，shape() 通常比固定像素的 path() 更适合。

例如：

.card {
  --gap: 20px;

  clip-path: shape(
    from 0 0,
    hline to calc(100% - var(--gap)),
    line to 100% 50%,
    line to calc(100% - var(--gap)) 100%,
    line to 0 100%,
    close
  );
}

这类写法特别适合响应式卡片、Banner、图片裁剪和营销页面。

shape()还能用于offset-path动画

shape() 不仅能够裁剪元素，还可以定义动画路径。例如让一个元素沿着自定义曲线运动：

.dot {
  offset-path: shape(
    from 0 50%,
    curve to 100% 50% with 30% 0 / 70% 100%
  );
  animation: move 4s linear infinite;
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}

这样可以完全通过CSS定义运动轨迹，无需额外的SVG动画代码。

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

虽然 shape() 在2026年已经进入 Baseline 2026，但旧浏览器仍可能不支持，因此生产环境建议提供降级方案。MDN也建议通过 @supports 检测特性。

例如：

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

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

这种渐进增强方式可以让现代浏览器使用 shape()，而旧浏览器继续采用传统CSS方案。

总结

CSS shape() 函数正在成为现代网页复杂图形设计的重要工具。它将路径绘制能力融入CSS，解决了传统 polygon() 表达能力有限、path() 可读性和单位支持不足等问题。对于响应式卡片、图片裁剪、网页装饰元素以及CSS动画路径等场景，2026年的前端项目可以开始逐步采用 shape()，同时使用 @supports 保证旧浏览器的兼容性。