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/

我希望这足以解释。我还假设还有其他解决方案。也许这个适合你。用你的颜色和图像改变内容。