带有背景图像的响应性偏斜Div

Question

我正在尝试制作一个页面，其中屏幕从右下角到左上角被分成两张图像

我已经在CSS中使用transform做到了：skewY（x amount deg）; 然后，我可以在网页加载时使用javascript更改此设置，方法是像这样通过三角学计算所需的度数

  feature
    ✓ header dashboard_nav test
    ✓ header dashboard_KB test
    ✓ header dashboard_analytics test
    ✓ header dashboard_reports test
    ✓ header header-profile test
    ✓ header header-enterprise-profile test
    ✓ header header-sign-out test

，每次页面调整大小时，我都可以通过JavaScript进行操作， 但是为了在CSS中做到这一点，我在下面做了这些类，并且想知道是否由于编辑伪::: after元素而根据页面大小有更好的替代响应度数量。

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;

Answer 1

据我所知，您唯一的可能性是带有遮罩图像。

支持不完全，但是提供了一种简便的方法。

请注意，渐变的“左上”方向（以及类似方向）将使您始终是元素的对角线

.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

您可以使用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%);
}