Question

I ‘m trying to create a two sided box shadow in two seperate elements, sandwiched by a three sided box shadow on the bottom and a three sided box shadow element on top. Like the image below:

I’m close, but as you can see, there is a bit of a space issue between the 3rd and 4th elements, and the top shadow is stopping in the middle for some reason…here is the CSS I have:

#tile1{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00, 0 -2px 5px 5px #319a00;
 }

  #tile2{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00;
  }

 #tile3{
-webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00;
 }

 #tile4{
 -webkit-box-shadow: 7px 0 5px  #319a00 , -7px 0 5px  #319a00, 0 3px 5px 5px #319a00;
}

Any ideas on how to make this happen? I can’t just put a box shadow to the whole div because I’m going to have these element toggle.

Answer 1

You CAN put a box-shadow on the whole div even if you’re going to toggle those inner elements. All you have to do is put a min-height property (make this equal to the height when all the boxes are toggled off) on your div instead of the height property and it will work.