Diagonal background structure [CSS]
Currently working on a web design project for a client where I developed a layered diagonal background. I solved one diagonal with:
background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;
However, as you can see in the image below, I need to add a smaller diagonal on the left side.
Does anyone have any idea how to solve this specific problem?
source to share
You can use one element HTML
, say, <div>
and use pseudo-elements in particular ::before
and ::after
to create these shapes, without writing additional elements HTML
.
First, you draw the color red:
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>
Then add a light mint green 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>
Remember that you may need to adjust the sizes and positions of the pseudo elements.
source to share
I suggest you use 2 DIVs and give one of them a gradient with a 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 this in action: https://codepen.io/FaridNaderi/pen/LLBVqw
Hope at least this helps you.
source to share