CSS Transform Свойство разделить страницу посередине

Question

Я ищу, чтобы разделить мою страницу по диагонали по середине с помощью свойства CSS transform (-45deg), чтобы получить следующий вид.

Answer 1

Как насчет этого demo?

div { 
    width: 500px; 
    height: 500px; 
    background: #ffffff; 
    background: -moz-linear-gradient(-45deg, #e0dedf 50%, #e37d72 50%); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#e0dedf), color-stop(50%,#e37d72)); 
    background: -webkit-linear-gradient(-45deg, #e0dedf 50%,#e37d72 50%); 
    background: -o-linear-gradient(-45deg, #e0dedf 50%,#e37d72 50%); 
    background: -ms-linear-gradient(-45deg, #e0dedf 50%,#e37d72 50%); 
    background: linear-gradient(135deg, #e0dedf 50%,#e37d72 50%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0dedf', endColorstr='#e37d72',GradientType=1); 
} 

Answer 2

Этот код показывает пример того, что у пытаются достичь:

#container { 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    background-image: url(http://freewallpic.com/wp-content/uploads/2013/12/Red-Leaves-HD-Wallpaper.jpg); 
} 

#triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid gray; 
    border-right: 100px solid transparent; 
} 

Проверьте jsfiddle пример здесь: http://jsfiddle.net/w5FQR/1/

Я надеюсь, что это объясняет достаточно. Я также предполагаю, что есть другие решения. Возможно, этот будет подходящим для Тебя. Измените содержимое цветов и изображений.