Отзывчивый скошенный Div с фоновым изображением - PullRequest
Новая
       23

Отзывчивый скошенный Div с фоновым изображением

0 голосов
/ 06 июня 2019

Я пытаюсь сделать страницу, где экран разделен пополам с двумя изображениями из нижнего правого угла в верхний левый угол

enter image description here Я сделал это в CSS, используя transform: skewY (x amount deg); Затем я могу изменить это с помощью javascript, когда страница загружается, вычисляя степень, необходимую с помощью тригонометрии, например 

var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;

и я могу сделать это с помощью javascript при каждом изменении размера страницы, но чтобы сделать это в CSS, я сделал эти классы ниже, и мне было интересно, есть ли лучшая альтернатива количеству адаптивных степеней в зависимости от размера страницы из-за редактирования элемента pseudo :: after. 

.homeleftside::after {
    transform-origin: top left;
    transform: skewY(-29deg);
    content: '';
    height: 100%;
    width: 100%;
    background: url("graphics/architecture.jpg");
    color: #fff;
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    overflow: hidden;
}


.homeleftside {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform-origin: top left;
    transform: skewY(29deg);
}

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Вы можете легко достичь этого, используя clip-path

body {
  margin:0;
  height:100vh;
  background:url(https://picsum.photos/id/10/800/800) center/cover;
}

body:before {
  content:"";
  display:block;
  height:100%;
  background:url(https://picsum.photos/id/18/800/800) center/cover;
  
  -webkit-clip-path:polygon(0 0,0 100%,100% 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
}
0 голосов
/ 06 июня 2019

Насколько я знаю, ваша единственная возможность с изображением маски.

Поддержка не полностью, но это дает простой способ добиться этого.

Обратите внимание, что направление «верхний левый» (и аналогичные) для градиента всегда получит диагональ элемента 

.test {
    background-image: linear-gradient(red, green);
    -webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
    mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}

#test1 {
    width: 300px;
    height: 200px;
}

#test2 {
    width: 200px;
    height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
...