Two divs separated by diagonal line - CSS

Question

I am trying to get two divs to fit the full width of the page, but in half diagonally.

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

Answer 1

It could 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> 

fiddle

Example 2

 div { background: #D25A1E; min-height: 100px; width: calc(50% - 25px); position: relative; } .div1 { float: left; } .div2 { float: right; } div:after { position: absolute; top: 0px; content:''; z-index: -1; height: 100%; width: 50%; background: #D25A1E; } .div1:after { right: 0; transform-origin: bottom right; transform: skewX(-20deg); } .div2:after { left: 0; transform-origin: top left; transform: skewX(-20deg); } 

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

fiddle