How to make a div proportional?

Question

css

It is necessary that two such oblique blocks stretch on the page with a width of 100%.

.header-left{
  width: 70%;
   	height: 0px;
   	border-top: 100px solid #F00;
        border-right: 100px solid transparent;
 	float: left;
  margin-right: -100px;
}

.header-right{
  width: 30%;
 	height: 0; 
 	border-bottom: 100px solid #ccc; 
  border-left: 100px solid transparent;
  float:left;
}

But this does not work, because you have to make another minus indent so that the blocks are connected. How can this be achieved? In addition, if you make blocks in this way, then I can’t increase them in height.

Answer 1

https://jsfiddle.net/mrqkd33w/2/

Answer 2

Alternatively, such a solution
https://jsfiddle.net/mrqkd33w/