如何以响应方式垂直调整剪切路径背景的大小？

Question

我在使用css的clip-path属性进行响应式背景时遇到一些麻烦。就我而言，我的内容容器中有一个背景，并且该容器中有超过100％的vh。此背景在45º处有一个剪裁的红色bg，因此当我将窗口调整为中间大小时，红色bg也不会调整大小。

当我调整窗口大小时，是否有办法在垂直和水平方向上调整剪切路径的大小？

.home {
    background-color: $bg-primary-color;
    &::before {
        width: 100%;
        min-height: 87.3rem;
        position: absolute;
        content: "";
        background-color: $bg-secondary-color;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 56.3%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 56.3%);

        @include response('tablet') {
            height: 110rem;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 93%);
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 93%);
        }

        @include response('phone') {
            height: 145rem;
        }
    }
}

谢谢！

Answer 1

确保clip-path的区域保持正方形，并且其大小足以覆盖您的元素。

这里是一个例子：

.box {
  height:100vh;
  background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) center/cover;
  clip-path:polygon(-100vmax -100vmax,100% -100vmax,100% 100%,-100vmax -50vmax);
  /* change the -50vmax to control the angle*/
}

<div class="box">

</div>

下面的插图可以理解元素为红色形状而clip-path为黑色形状的技巧