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

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 one 
  
 div two



  
 div one 
 line two 
  
 div two