Diagonal Background Structure [CSS]

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

@Lars Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that come across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (: — Danziger, Jan 31 '18 at 05:03

Danziger · Answer 1 · 2017-07-25T22:03:28.047

You can use a single HTML element, let's say a <div>, and use pseudo-elements, particularly ::before and ::after, to create those shapes, without writing additional HTML elements.

You would draw the red one first:

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>

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

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>

Keep in mind that your may need to adjust the dimensions and positions of the pseudo-elements.

score 1 · Answer 2 · answered Jul 05 '17 at 21:24

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.

Diagonal Background Structure [CSS]

2 Answers2