CSS shape() 怎样用可伸缩路径裁剪卡片

如果卡片的裁剪轮廓要随着容器宽度变化，直接把一串固定像素路径塞进 clip-path 往往很快失去弹性。CSS shape() 允许在路径中使用百分比、rem 以及 CSS 数学函数，因此更适合写“同一轮廓、不同尺寸”的卡片。关键写法是：把 shape() 放在 clip-path 中，用 from 定义起点，再用 line、curve 等命令描述轮廓。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape

先用 clip-path: shape(...) 建立可伸缩轮廓；坐标优先使用百分比，固定间距再用 rem 或 calc() 补足。若目标环境不支持 shape()，保留一个普通矩形或圆角卡片作为降级样式。

shape() 的坐标模型到底包含什么

shape() 属于 CSS 的基本形状函数。它从一个 from 起点开始，后面接一个或多个形状命令；命令可以是直线、水平线、垂直线、曲线、圆弧或 close。这和 SVG 路径有相似之处，但语法直接放在 CSS 中，更容易与组件尺寸和 CSS 数学函数一起维护。

先把一张卡片拆成四个概念：卡片本身是盒子，clip-path 是裁剪入口，shape() 是轮廓描述，坐标与数学函数则负责让轮廓适配不同尺寸。理解这四层后，路径中的每个数字都有明确归属。

先用百分比写一个可伸缩卡片轮廓

下面的示例把一个卡片裁成左上角带折角、右下角略收窄的轮廓。代码中的百分比相对于被裁剪元素的尺寸，因此卡片变宽或变窄时，轮廓仍然按比例变化。

可伸缩卡片
  
轮廓跟随容器尺寸变化。

这里的 from 0 12% 是起点，后续 line to 依次连接各个轮廓点，close 把最后一个点与起点闭合。它不是一串按时间执行的指令，而是描述一个静态裁剪区域；因此不要把箭头式流程图当成代码执行顺序。

固定内边距时，用 rem 和 calc() 补上约束

纯百分比适合表达轮廓比例，但当卡片很窄时，折角可能变得太小；当卡片很宽时，某个固定安全区又可能不够。可以把百分比和 rem 放进 calc()，让坐标同时受到容器比例和固定间距影响。

.notice-card {
  /* 背景和内边距属于卡片盒模型，不依赖路径坐标 */
  padding: 1.5rem;
  background: #f4c95d;

  /* 让顶部折角至少保留 1rem，同时随卡片宽度增长 */
  clip-path: shape(
    from max(1rem, 0%) 1rem,
    line to calc(100% - 1rem) 0,
    line to 100% 1rem,
    line to 100% calc(100% - 1rem),
    line to calc(100% - 1rem) 100%,
    line to 1rem 100%,
    close
  );
}

这个例子把“边缘至少留出一段距离”写进坐标表达式。实际项目中要注意：路径坐标解决的是裁剪轮廓，文字可读性仍由 padding、最小宽度和内容换行负责，不能只靠改变轮廓来替代布局约束。

shape() 和 path() 该怎么选

两者都能参与 clip-path，但维护体验不同。shape() 支持更贴近 CSS 的坐标写法，也能使用百分比、rem 和数学函数；path() 通常把路径写成 SVG 风格字符串，适合已经有固定路径数据或需要沿用设计工具导出的轮廓。

兼容性和降级样式怎么安排

shape() 是较新的 CSS 能力，不能默认所有旧浏览器都支持。组件可以先写背景、圆角和内边距，再用特性查询覆盖裁剪路径；不支持时仍保持一张可读的普通卡片。

.feature-card {
  /* 不支持新函数时，保留一个完整可读的默认形态 */
  background: #16324f;
  border-radius: 1rem;
  overflow: hidden;
}

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
  .feature-card {
    /* 仅在浏览器声明支持时启用自定义轮廓 */
    clip-path: shape(
      from 0 8%,
      line to 8% 0,
      line to 100% 0,
      line to 100% 92%,
      line to 92% 100%,
      line to 0 100%,
      close
    );
  }
}

降级检查可以围绕三个问题展开：不支持时文字是否仍有足够对比度，窄屏时内边距是否挤压内容，裁剪边缘是否遮住交互控件。若卡片边缘承载按钮或链接，优先把交互元素放在安全区域内。

常见问题

shape() 能直接替代所有 path() 吗？

不能。已有 SVG 路径、设计工具导出数据或固定几何轮廓时，path() 仍然有价值；只有在需要 CSS 单位、容器比例或数学函数时，shape() 的优势才明显。

为什么卡片变窄后内容被裁掉？

裁剪区域和布局盒子是两件事。检查路径是否覆盖了内容区，再检查 padding、最小宽度和换行规则；不要只把裁剪点继续向外移动。

可以把 shape() 当作动画路径吗？

可以研究路径值之间的过渡，但文章中的写法只讨论静态裁剪关系。若要做动画，还要单独确认参与过渡的属性、浏览器支持和减少动态效果偏好。

总结

用 shape() 裁剪响应式卡片时，先把 clip-path 当作入口，再用 from、line 和 curve 描述轮廓，最后用百分比、rem 与 calc() 处理伸缩和固定间距。需要复用固定 SVG 路径时选择 path()，并为不支持新函数的环境保留普通卡片降级。