如何用CSS mask/clip为可变宽高侧边栏实现复杂边角？

嘿，这个问题太常见了，而且完全可以解决！哪怕侧边栏的宽高是动态自适应的，我们照样能用CSS实现任意边角的clip/mask效果，不用依赖固定数值。下面给你两种实用的方案：

方法一：用clip-path实现（最直观，适合自定义形状） #

clip-path是CSS里专门用来裁剪元素的属性，支持百分比和calc()计算，刚好适配未知宽高的场景。比如你要实现左上角和右下角的切角效果，代码可以这么写：

.sidebar {
  /* 宽高自适应，比如基于父容器百分比或auto */
  width: 30%;
  height: auto;
  min-height: 400px;
  /* 带纹理的背景 */
  background: url('你的纹理图片路径') repeat;
  /* 关键的clip-path代码，20px是边角裁剪的尺寸，可自行调整 */
  clip-path: polygon(
    20px 0,          /* 左上角裁剪后的起点 */
    100% 0,          /* 右上角 */
    100% calc(100% - 20px), /* 右下角裁剪的上边界点 */
    calc(100% - 20px) 100%, /* 右下角裁剪的左边界点 */
    0 100%,          /* 左下角 */
    0 20px           /* 左上角裁剪的下边界点 */
  );
}

原理说明： #

• 100%会自动对应元素的最大宽度/高度，不管元素怎么自适应，这个值都会动态变化
• calc(100% - 20px)实现了从元素边角往内偏移固定尺寸的效果，完美适配未知宽高的场景
• 你可以把20px换成百分比（比如10%），让裁剪尺寸跟着元素大小一起缩放

如果想要圆角而非切角，也可以用clip-path: path()定义复杂路径，配合CSS变量更方便动态调整：

.sidebar {
  --corner-size: 20px;
  clip-path: path('M var(--corner-size),0 C 0,0 0,var(--corner-size) 0,var(--corner-size) L 0,100% L 100%,100% L 100%,calc(100% - var(--corner-size)) C 100%,calc(100% - var(--corner-size)) 100%,100% calc(100% - var(--corner-size)),100% L var(--corner-size),0 Z');
}

方法二：用mask实现（更灵活，支持渐变/透明效果） #

如果你想要更灵活的边角效果（比如渐变过渡的裁剪），可以用CSS mask属性。同样不需要知道元素的具体宽高：

.sidebar {
  width: 30%;
  height: auto;
  background: url('你的纹理图片路径') repeat;
  /* 左上角和右下角的mask规则 */
  mask-image: 
    /* 左上角切角：135度渐变，透明区域就是裁剪部分 */
    linear-gradient(135deg, transparent 20px, black 20px),
    /* 右下角切角：-45度渐变 */
    linear-gradient(-45deg, transparent 20px, black 20px);
  /* 分别定位到对应角落 */
  mask-position: top left, bottom right;
  /* 每个mask只覆盖一半区域，避免重叠 */
  mask-size: 50% 50%;
  mask-repeat: no-repeat;
  /* 两个mask叠加生效 */
  mask-composite: add;
}

原理说明： #

• mask-position: top left和bottom right会自动锚定元素的角落，不受宽高变化影响
• 把linear-gradient换成radial-gradient就能实现圆角裁剪，调整渐变角度还能做出不同的边角形状

关键注意点： #

1. 两种方法都能完美适配纹理背景，裁剪/mask会直接作用于整个元素（包括背景图）
2. 现代浏览器都支持这两个属性，clip-path的兼容性略优于mask
3. 要实现四个边角效果，只需在clip-path的polygon里补充另外两个角的坐标，或在mask-image里添加对应渐变即可

这样不管你的侧边栏是垂直还是水平自适应，这些代码都能正常工作，完全不需要提前知道元素的宽高数值！

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