CODEWITHSUNDEEP
css
hepto
hepto

Reputation: 33

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

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?

Upvotes: 3

Views: 3317

Answers (2)

Nate Northway
Nate Northway

Reputation: 26

Add a second element for the shadow and position it behind the banner using z-index.

.shadow, 
.circle {
  display: block;
  height: 120px;
  width: 120px;
  position: absolute;
  bottom: -100%;
  left: calc(50% - 62px);
  border-radius: 50%;
}
.shadow {
  box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
  border: 2px solid transparent;
  z-index: -1;
}
.circle {
  background: #e0e0e0;
  border: 2px solid white;
}

See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

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

Upvotes: 4

Related Questions