CODEWITHSUNDEEP
css
A Bogus
A Bogus

Reputation: 3930

Box-shadow on 3 of four sides of div

I have 2 divs that sit on top of each other, and I want one shadow that surrounds them both. I can't wrap the 2 divs in a div.

How can I have shadows only on the top, left, and right side on the top div, and shadows only on the bottom, left, and right side of the bottom div?

Right now I have the following -

#topDiv, #bottomDiv
{
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090;   
}

Upvotes: 1

Views: 4344

Answers (2)

vals
vals

Reputation: 64164

You can do it with clip it the divs can be positioned absolute:

#topDiv, #bottomDiv
{
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090;   
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: lightyellow;
    border: solid 1px red;
}

#topDiv {
    left: 15px;
    top: 10px;
    clip: rect(0px, 120px, 150px, -10px); 
}

#bottomDiv {
    left: 150px;
    top: 10px;
    clip: rect(-10px, 120px, 102px, -10px); 
}

demo

Upvotes: 2

David Millar
David Millar

Reputation: 1878

You can't have it render on only three sides, as it's really a big blurry block behind the element itself. The best way I've found to fake it is simply by moving it further down the Y-axis and tweaking values until it looks good.

You could also experiment with ::before and ::after and try making a 2/3-height pseudo-element that carries the box-shadow, but again, it's a hack, and it'll require tweaking to look good.

Upvotes: 0

Related Questions