Trying to replicate an idea of concentric sqares:

Concentric Image squares (the following is an image):

concentric squares image


Not-Yet Concentric CSS squares:

The following uses three nested divs (meaning, divs inside each other).
Each inside div is set to be smaller in width and height than the divs it is inside of.




To resolve the above replication challenge, check out the two working solutions:

Solution 2 - concentricCSSsquares2.html - Solved using relatively positioned divs that are inside each other

Solution 3 - concentricCSSsquares3.html - Solved with a few different sizes of divs plus some CSS padding settings