用不同的颜色,图象和形状的背景

我想要这样的背景.如何使用纯CSS获得此功能.

我搜索过这个,但我找不到任何答案.

我想忽略大背景图像的用法.

UPDATE

我试过这样的(只有颜色)

background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)

但是,我想用彩色添加图像.

这是Fiddle,我尝试过Fiddle-Demo

它有响应问题,您可以通过调整窗口来检查.

多个背景图片:

div {
  height: 200px;
  width: 400px;
  margin: auto;
  border: 1px solid grey;
  background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}