css - 将 HTML 背景设置为两个三 Angular 形

Question

我试图以一种看起来由两个三 Angular 形组成的方式设置我的 HTML 背景，但我似乎无法让它完全适合页面。我将如何做到这一点，并且还能为两者设置自定义颜色？

这是我正在使用的代码:

#container {
  position: relative;
  height: 800px;
  width: 800px;
  overflow: hidden;
  background: grey;
  margin-left: -0.4%;
  margin-top: -0.4%;
}

#container:before { 
  content: '';
  position: absolute;
  left: 28%;
  top: 28%;
  width: 1200px; 
  height: 1200px; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="container"></div>

我尝试将所有高度和宽度更改为 100vh 和 100vw，但这似乎没有帮助，而且没有更改颜色的选项。任何帮助将不胜感激!

Answer 1

你可以用 background: linear-gradient() 来做到这一点:

html, body {margin: 0; width: 100vw; height: 100vh}

body {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, Salmon), color-stop(50%, Khaki));
  background: -webkit-linear-gradient(top left, Salmon 50%, Khaki 50%);
  background: -o-linear-gradient(top left, Salmon 50%, Khaki 50%);
  background: linear-gradient(to bottom right, Salmon 50%, Khaki 50%);
}