CSS clip-path: polygon属性中如何使用数学表达式实现自适应裁剪？

你要实现这类带视口单位的数学计算，需要使用CSS内置的calc()函数包裹表达式，注意运算符前后必须加空格，同时视口单位需要和对应数值搭配使用，不能直接单独写vh/vw作为数值。

正确的裁剪属性写法 #

clip-path: polygon(
  100% 0%,
  100% calc(100vh - 100px),
  calc(100vw - 100px) 100%,
  0% 100%,
  0% 0%
);

完整修正后的代码 #

CSS代码

* {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  background-color: red;
}
.clip {
  height: 100vh;
  width: 100%;
  background-color: white;
  clip-path: polygon(
    100% 0%,
    100% calc(100vh - 100px),
    calc(100vw - 100px) 100%,
    0% 100%,
    0% 0%
  );
}
.shadow {
  filter: drop-shadow(3px 1px 5px rgba(50, 50, 0, 0.5));
}

HTML代码

<div class="shadow">
  <div class="clip"></div>
</div>

注意事项 #

• calc() 支持加减乘除四则运算，其中加减号前后必须预留空格，否则会被识别为无效语法
• 上述写法可以保证裁剪斜边的直角边固定为100px，在任意视口尺寸下斜边长度都保持一致

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