调整浏览器大小时（使用的剪切路径），坡度保持流动

Question

我制作了一个具有倾斜度的面具，覆盖了屏幕的一半。

但是，当我调整浏览器的大小时，倾斜部分会流向左侧，并且角度会像这样变化。

这是区别。

//调整大小之前

//调整大小后

$(document).on("focusout","#account-number",function(){ alert("number ready"); }); 

#home {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; 
}
#home:before {
  content: "";
  position: relative;
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  right: 0;
  float: right;
  clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%); 
}

#home-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; 
}

（我删除了菜单部分，因为代码太长了。）

有什么解决方案可以阻止倾斜角度来阻止浏览器的大小？

谢谢

Answer 1

您可以考虑使用渐变背景代替clip-path。您将获得更好的支撑，并且可以保持相同的角度：

#home {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; 
}
#home:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left:0;
  background: 
     linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
  background-repeat:no-repeat;
}

#home-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; 
}

<section id="home">
  <div id="home-image">
    <img src="img/background.jpg" alt="">
  </div>
  <div id="home-menu">
    <ul>
      <li>HOME</li>
      <li>PAGES</li>
      <li>CONTACT</li>
      <li>ABOUT</li>
    </ul>
  </div>
</section>