Back to home prev next
CSS code

My first approach with this challenge was to use four separate elements - squares - and position them to overlap in a way that replicated the image. I knew there had to be a more efficient way. I then decided I could get the desired effect with one large square and two smaller squares (as pseudo-elements) positioned at the corners of that. Another person's approach was to use one element and multiple box-shadows. I tried playing with their code so I could understand it, and I kind of get it, but need to get better acquainted with the docs and practice that technique.

Check out my code