slider - two divs split with diagonal line - CSS

Question

I am trying to get two divs to fit the full width of the page but split in half with a diagonal line.

How can I achieve this with two divs through CSS? it is for a slider and needs content added to each part when finished

Answer 1

It can be something like this

Example 1

div {
    min-height: 100px;
    background: #D25A1E;
    position: relative;
    width: calc(50% - 30px);
}
.div1 {
    float: left;
}
.div2 {
    float: right;
}
.div1:after, .div2:before {
    content:'';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.div1:after {
    left: 100%;
    border-top: 100px solid #D25A1E;
    border-right: 50px solid transparent;
}
.div2:before {
    right: 100%;
    border-bottom: 100px solid #D25A1E;
    border-left: 50px solid transparent;
}

<div class="div1"></div>
<div class="div2"></div>