CSS: Making two complementary diagonal divs

问题:

this is what I'm trying to do:

This is how I was trying to do it: The first div 'subCont1' works fine, even if it's getting out of the page. If I do the same thing with the second, this time scroll activates for the same reason.

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

回答1:

I made this for one of my projects with a skewed handle which supported an animation using javascript but I took out those to make it raw and simple as per the design you mentioned. Hope, it helps.

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

回答2:

You can use a background gradient to fake it:

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