响应偏斜的Div与背景图像

Question

I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner

I have done this in CSS using transform: skewY( x amount deg); I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so

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;

and I can do this via javascript every time the page is resized, but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.

.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);
}

Answer 1

As far as I know, your only posibility is with a mask-image.

Support is not fully, but it gives an easy way to achieve it.

Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element

 .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> 

Answer 2

You can easily achieve this using 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%); }