Как адаптивно изменить размер фона клипа по вертикали?

Question

У меня проблемы с адаптивным фоном с помощью свойства css clip-path. В моем случае у меня есть фон в моем контейнере контента, и этот контейнер содержит более 100% vh. Этот фон имеет обрезанный красный фон под углом 45 °, поэтому, когда я изменяю размер окна до промежуточного размера, красный фон тоже не изменяется.

Есть ли способ изменить размер клипа по вертикали и горизонтали, когда Изменить размер окна?

.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 черная форма