CSS變換屬性拆分頁面中間

Question

我正在尋找使用CSS變換（-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/

我希望這可以解釋不夠。我還假設還有其他解決方案。也許這個會適合你。用你的顏色和圖像改變內容。