Two divs with shadows look like one piece. Is this possible in CSS?

Question

I have two divs next to each other whose background color is white. http://jsfiddle.net/J5ZXt/ - link to the code. I want the two divs to look like one element, so I need to remove part of the shadow. Any ideas?

Answer 1

This is the best I could get in a couple of minutes, I think it does the job. Best of all its simplicity (only 3 edits of your css)

Position D1 is a shadow, so the right edge has a negative value (-4px is enough to hide it)

Give the relative positioning of the divs so that we can control their stacking order.

Give D1 a higher z-index than D2 to mask the top of the shadow D2.

#one { width: 100px; height: 100px; background: #FFF; -moz-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3); box-shadow: -4px 0px 3px 1px rgba(0,0,0,0.3); float:left; position: relative; z-index: 20; } #two { width: 100px; height: 300px; background: #FFF; -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); float:left; z-index: 5; position: relative; } 

Answer 2

Yes it is possible. Just close it :before :

 /* Add relative positioning */ #two { position:relative; } /* Add :before element to cover up shadow */ #two:before { background:white; display:block; content:"."; font-size:0; width:4px; height:100px; position:absolute; left:-4px; top:0; } /* Existing styles */ #one { width: 100px; height: 100px; background: #FFF; -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); float:left; } #two { width: 100px; height: 300px; background: #FFF; -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); float:left; } 

 <div id="one"></div> <div id="two"></div> 

Answer 3

Pure CSS - No

You can always try absolutely positioning the div above it, as in this example

Solution :: before does not work in all browsers

Answer 4

Since I hate being superior and inclined to be a perfectionist, I came up with an answer that does not rely on a certain height for #one - it should be shorter than #two (which is also the case for the currently accepted answer ). It also has no lack of clearance or more shadow on one side of #one .

Note: This answer also gives the possibility of a curved corner through border-radius . Just add border-radius:4px; in #one:after to see the result.

JsFiddle example

New CSS

 <style type="text/css"> #one { width: 100px; height: 200px; background: #fff; float:left; position:relative; overflow:hidden; } #one:after { display:block; content:"."; font-size:0; color:transparent; height:8px; width:100%; padding-left:4px; position:absolute; bottom:-4px; left:-4px; background:#fff; z-index:2; -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3); } #two { width: 100px; height: 300px; background: #FFF; -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); float:left; } </style>