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

I found an interesting way to do this from here, which uses clip-path .Answering my own question so that everyone can use it.

html,
body {
  margin: 0;
}

body {
  background: #eee;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

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

Answer 2

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>

JS fiddle https://jsfiddle.net/kqsrmrss/2/

Answer 3

You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail

Fiddle demo

Stack snippet ^{Note 1}

body {
  background: #eee;
}
.darker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 50%;
  background: #dd4f39;
  overflow: hidden;
}
.darker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
  transform: skewY(26.5deg);
  transform-origin: left top;
}

<div class="darker"></div>

---

Optionally, you can add media query to control the angle at different screen sizes

Fiddle demo 2

---

With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.

---

^{Note 1} Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.