CSS: Making two complementary diagonal divs

Question

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 th

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

  

    

      

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
      
    
  

  

    

      

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore .