Search code examples
cssclip-path

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

I have a page that looks like this example:

https://codepen.io/zxcid/pen/MWvLPqQ

* {
  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>

Since with this code I can't have the same shape with different vw or vh (I always want the two sides of the same lenght), I would like to clip the section with an expression such as follows:

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

How can I write this expression in CSS?

Solution

  • use 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>