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

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"> </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;
}
.box {
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.

Answer 4

Please Use this code snippet.
div {
width: 100%;
height: 100px;
}
.diagonalRising {
border: 1pt solid black;
background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalFalling {
background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalCross {
position: relative;
background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}
.diagonalCross:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}
<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>

Answer 5

Try this,
.box::after {
background: #E52A35
content: '';
position: absolute;
width: 100%;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}