html - Divide a rectangle into 2 triangles along diagonal using css

Question

I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?

body {
  background: #eee;
}

.darker {
  position: fixed;
  top: -94%;
  left: -10%;
  width: 150%;
  height: 150%;
  background: #dd4f39;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

<div class="darker">&nbsp;</div>

Answer 1

This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements

div and it's pseudo element should have same width and border-left respectively. div and it's pseudo element should have same height and border-top respectively.

html, body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.box:after {
  content: ' ';
  border-top: 100vh solid #dd4f39;
  border-left: 100vw solid transparent;
  width: 0;
  position: absolute;
}

<div class="box"></div>