能否用纯CSS实现带内斜切效果的锯齿边缘？

不用依赖border-image或受限于mask的阴影问题，这里提供一个基于clip-path+多层渐变的纯CSS方案，既能轻松修改颜色，又能实现内斜切阴影效果：

核心思路 #

• 用clip-path定义锯齿边缘的多边形路径，替代图片或mask，不会遮挡内部阴影/渐变
• 用多层linear-gradient分别实现主体颜色和内斜切阴影，两者分离便于单独调整

实现代码 #

.sawtooth-element {
  width: 320px;
  height: 220px;
  /* 自定义锯齿形状：可调整百分比改变锯齿大小、密度 */
  clip-path: polygon(
    0% 8%, 4% 0%, 8% 8%, 12% 0%, 16% 8%, 20% 0%, 24% 8%, 28% 0%, 32% 8%, 36% 0%, 40% 8%,
    44% 0%, 48% 8%, 52% 0%, 56% 8%, 60% 0%, 64% 8%, 68% 0%, 72% 8%, 76% 0%, 80% 8%,
    84% 0%, 88% 8%, 92% 0%, 96% 8%, 100% 8%,
    100% 92%, 96% 100%, 92% 92%, 88% 100%, 84% 92%, 80% 100%, 76% 92%, 72% 100%, 68% 92%,
    64% 100%, 60% 92%, 56% 100%, 52% 92%, 48% 100%, 44% 92%, 40% 100%, 36% 92%, 32% 100%,
    28% 92%, 24% 100%, 20% 92%, 16% 100%, 12% 92%, 8% 100%, 4% 92%, 0% 92%
  );
  /* 多层背景：上层为内斜切阴影，下层为主体颜色 */
  background:
    linear-gradient(to bottom right, transparent 49.5%, rgba(0,0,0,0.25) 50%),
    #4ecdc4; /* 直接修改此值即可更换元素颜色 */
}

方案特点 #

• 颜色调整零成本：只需修改background里的主体色值，无需处理任何图片资源
• 阴影不受限制：用渐变模拟内斜切效果，不会被clip-path裁剪遮挡，效果等同于inset box-shadow
• 锯齿高度可定制：修改clip-path中百分比数值（比如把8%改成10%），就能快速调整锯齿的大小和密度

如果需要四边都添加内斜切阴影，只需增加对应方向的渐变层即可。

内容的提问来源于stack exchange，提问作者mayfrogs