CSS：制作两个互补的对角线div

Question

这就是我想要做的事情：

这就是我尝试这样做的方式：   第一个div＆＃39; subCont1 ＆＃39;工作得很好，即使它离开了网页。如果我对第二个做同样的事情，这次滚动会激活出于同样的原因。

＆＃13;

＆＃13;

.subCont1{
  
    background-color: blueviolet;
    position:absolute;
    left:-20%;
    top:0;

    width:70%;
    height:100%;
    transform: skew(-20deg); 

    border:2px solid yellow;
}

.subCont2{    
  
      width:50%;
      height:100%;

      border:2px solid grey;

      z-index:1000;

      overflow:hidden;
  }

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用背景渐变来伪造它：

.mybox {
  border: solid;
  background: linear-gradient(100deg, blue 49.75%, black 50%, black calc(50% + 3px), green calc(50% + 4px));
  display: flex;
  margin:1em;
}

.mybox div {
  padding: 1em 2%;
  flex:1;
  color:white;
}

<div class=mybox>
  <div> div one </div>
  <div> div two</div>
</div>

<div class=mybox>
  <div> div one <br> line two </div>
  <div> div two</div>
</div>

Answer 2

我为我的一个项目制作了这个带有倾斜手柄的项目，它使用javascript支持动画但是我根据你提到的设计拿出那些原始和简单的项目。希望，它有所帮助。

#wrapper{
  position:relative;
  width:100%;
  min-height:300px;
  overflow:hidden;
  z-index: 100;
  border:2px solid black;
}

.layer{
  position:absolute;
  width:100vw;
  min-height:300px;
  overflow:hidden;
  border:2px solid black;
}

.layer .content-wrap{
  position:absolute;
  width:100vw;
  min-height:300px;
}

.layer .content-body{
  width:25%;
  position:absolute;
  top:40%;
  text-align:center;
  transform: translateY(-50%);
}

.bottom{
  background: green;
  z-index:101;
}

.bottom .content-body{
  right:10%;
}

.top{
  background: red;
  color:#222;
  z-index:102;
  width:50vw;
}

.top .content-body{
  left:5%;
  color:#222;
}

.skewed .top{
  transform: skew(-20deg);
  margin-left:-1000px;
  width:calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(20deg);
  margin-left:1000px;
}

<section id="wrapper" class="skewed">
  <div class="layer bottom">
    <div class="content-wrap">
      <div class="content-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
      </div>
    </div>
  </div>

  <div class="layer top">
    <div class="content-wrap">
      <div class="content-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore . </p>
      </div>
    </div>
  </div>

</section>