I am trying to produce the following result: Desired outcome However I am getting this so far and I am stuck. What I am getting
This is my code:
.base {
background: #e2e2e2;
width: 1020px;
height: 350px;
position: absolute;
top: 100px;
left: 130px;
}
<div class="section5" style="width:100%;background-color:#f5f5f5;height:550px;position: relative;">
<div class="base"></div>
<div class="square1" style="width:255px;height:193px;background-color:#969696; z-index:1;"></div>
</div>
We start with the base of our HTML:
<div class="section5">
<div class="base"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
And style:
.section5 {
position: relative;
width: 800px;
height: 600px;
background-color: #f5f5f5
}
.base {
position: relative;
width: 600px;
height: 400px;
background-color: #e2e2e2;
left: 100px;
top: 100px;
}
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
}
Now we can use nth-of-type
to make the odd
squares white:
.square:nth-child(odd) {
background-color: white;
}
To calculate the absolute position of the squares, if we want the first and last square to have a 50px
gap from the .section5
square, and we have n
squares, we can calculate the distance d
between two adjacent squares like this:
d = (W - 2x - w) / (n - 1)
where W
is the width of the .section5
and x
is the 50px
gap we mentioned earlier. So the d
in this case will be 110px
, so the left
of each square needs to be increased by 110px
from the previous one.
The same logic applies to the top
.
And by applying those, we get the final result (open it in full view)
.section5 {
position: relative;
width: 800px;
height: 600px;
background-color: #f5f5f5;
}
.base {
position: relative;
width: 600px;
height: 400px;
background-color: #e2e2e2;
left: 100px;
top: 100px;
}
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
}
/* Apply alternating background color to odd squares */
.square:nth-child(odd) {
background-color: white;
}
/* Positioning the squares */
.square:nth-child(2) {
left: 50px;
top: 50px;
}
.square:nth-child(3) {
left: 160px;
top: 126px;
}
.square:nth-child(4) {
left: 270px;
top: 202px;
}
.square:nth-child(5) {
left: 380px;
top: 276px;
}
.square:nth-child(6) {
left: 490px;
top: 354px;
}
.square:nth-child(7) {
left: 600px;
top: 430px;
}
<div class="section5">
<div class="base"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
An alternative approach using CSS variables:
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
left: calc(50px + 110px * var(--i));
top: calc(50px + 76px * var(--i));
}
.square:nth-child(2) { --i: 0; }
.square:nth-child(3) { --i: 1; }
.square:nth-child(4) { --i: 2; }
.square:nth-child(5) { --i: 3; }
.square:nth-child(6) { --i: 4; }
.square:nth-child(7) { --i: 5; }