Clipping a circle box-shadow where it overlaps square <div>

Issue

Consider the following –

#banner {
    width: 100%;
    height: 50px;
    box-shadow: 0 0 10px #000000;
    background: #63B0F2;
}

#circle {
    position: relative;
    top: 20px;
    height: 80px;
    width: 80px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 10px #000000;
    background-color: white;
}
<div id="banner">
    <div id="circle">
    </div>
</div>

Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?

To put it another way, so there is only shadow cast onto the background, but not each other?

Solution

Possible solution with pseudo-elements :before and :after. Just add to your CSS:

#circle:before{
    position: absolute;
    content: "";
    width: 150%;
    height: 50%;
    left: -25%;
    top: -10px;
    background: #63B0F2;
}

#circle:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: white;
    border-radius: 50%;
}

DEMO

Answered By – lmgonzalves

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.