对角线背景结构[CSS]

Question

目前正在为我设计多层对角背景的客户进行网页设计项目。我用;

解决了一个对角线

background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;

但是，如下图所示，我需要在左侧添加一个较小的对角线 有没有人知道如何解决这个具体问题？

Answer 1

您可以使用单个HTML元素，让我们说<div>，然后使用pseudo-elements，尤其是::before和::after，创建这些形状，而无需编写其他HTML元素。

你先画红色的：

＆＃13;

＆＃13;

body {
  margin: 0;
}

.fullBox {
  position: relative;
  height: 100vh;
}

.diagonalBox {
  background: #FFF;
  overflow: hidden;
}

.diagonalBox::before, 
.diagonalBox::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
}

.diagonalBox::before {
  background: #D00;
  top: 10%;
  transform: rotate(30deg);
  transform-origin: top left;
}

＆＃13;

<div class="fullBox diagonalBox"></div>

＆＃13;

＆＃13;

＆＃13;

然后在上面添加浅薄荷绿色：

＆＃13;

＆＃13;

body {
  margin: 0;
}

.fullBox {
  position: relative;
  height: 100vh;
}

.diagonalBox {
  background: #FFF;
  overflow: hidden;
}

.diagonalBox::before, 
.diagonalBox::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
}

.diagonalBox::before {
  background: #D00;
  top: 10%;
  transform: rotate(30deg);
  transform-origin: top left;
}

.diagonalBox::after {
  background: #DFD;
  top: 100%;
  transform: rotate(-30deg);
  transform-origin: bottom left;
}

＆＃13;

<div class="fullBox diagonalBox"></div>

＆＃13;

＆＃13;

＆＃13;

请注意，您可能需要调整伪元素的尺寸和位置。

Answer 2

我建议你使用2个DIV并给它们一个透明色的渐变色。 HTML：

<div class="outer">
  <div class="inner"></div>
</div>

CSS：

.outer,.inner{  
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.outer { 
  background-color: #dbebde;
  background-image: -webkit-linear-gradient(50deg, red 70%, #f8f8f8 65%); 
  background-image: -moz-linear-gradient(50deg, red 70%, #f8f8f8 65%);
  background-image: -o-linear-gradient(50deg, red 70%, #f8f8f8 65%);
  background-image: -ms-linear-gradient(50deg, red 70%, #f8f8f8 65%);
} 
.inner{
  background-color:  transparent;
  background-image: -webkit-linear-gradient(120deg, #dbebde 60%, transparent 55%);
  background-image: -moz-linear-gradient(120deg, #dbebde 60%, transparent 55%);
  background-image: -o-linear-gradient(120deg, #dbebde 60%, transparent 55%);
  background-image: -ms-linear-gradient(120deg, #dbebde 60%, transparent 55%);
}

你可以看到它的实际效果： https://codepen.io/FaridNaderi/pen/LLBVqw

希望至少它可以帮到你。