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

Question

我想要这样的背景。我怎样才能用纯CSS获得它。

我搜索了这个，但我没有找到任何答案。

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

更新

我试过这样的（只有颜色）

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

但是，我想用彩色添加图像。

这是小提琴，我尝试过Fiddle-Demo

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

Answer 1

多个背景图片：

＆＃13;

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

或伪元素：

＆＃13;

＆＃13;

div {
  height: 200px;
  width: 400px;
  margin: auto;
  border: 1px solid grey;
  background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
  background-size: 100%;
  background-position: center right;
  background-repeat: no-repeat;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;