我可以在 css 属性剪辑路径中使用数学表达式：多边形吗？

Question

我有一个类似于此示例的页面：

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

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

由于使用此代码我不能使用不同的 vw 或 vh 具有相同的形状（我总是希望两侧的长度相同），我想用如下表达式剪辑该部分：

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

如何在CSS中写出这个表达式？

Answer 1

使用calc()

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

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

我可以在 css 属性 剪辑路径中使用数学表达式：多边形吗？

Can I use a math expression in the css property clip-path: polygon?

css

clip-path

我可以在 css 属性剪辑路径中使用数学表达式：多边形吗？