css - 对 Angular 线背景结构 [CSS]

Question

目前我正在为客户设计一个网页设计元素，我设计了一个多层对 Angular 线背景。我解决了一个对 Angular 线;

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

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

Answer 1

您可以使用单个 HTML元素，假设一个 <div> ，并使用 pseudo-elements , 特别是 ::before 和 ::after , 创建这些形状，无需额外编写 HTML元素。

你会先画红色的:

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

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

然后在上面添加浅薄荷绿:

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

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

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