Question: Currently working on a web design project for a client where I designed a multi-layered diagonal background. I solved a single diagonal with;

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

```

However, as seen in the image below, I need to add a smaller diagonal on the left side.  

Does anyone have an idea on how to solve this specific issue?

![Background Diagonal CSS](https://i.stack.imgur.com/o4k9q.jpg)

Answer: 
You can use a single `HTML` element, let's say a `<div>`, and use [pseudo-elements](https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements), particularly [`::before`](https://developer.mozilla.org/en/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en/docs/Web/CSS/::after), to create those shapes, without writing additional `HTML` elements.

You would draw the red one first:

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

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

And then add the light mint green one on top of that:

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

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

Keep in mind that your may need to adjust the dimensions and positions of the pseudo-elements.
I suggest you using 2 DIVs and give one of them a gradient with transparent color. 
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%);
}

```

You can see it in action:
<https://codepen.io/FaridNaderi/pen/LLBVqw>

Hope at least it helps you.