I am currently using box shadow for both the parent (.map) and child (.toggle-button):
.map {
position: fixed;
top: 20px;
right: 0;
width: 280px;
height: 280px;
z-index: 9999;
box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}
.map .toggle-button {
background: #fff;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
cursor: pointer;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: -20px;
width: 20px;
height: 68px;
box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
}
However, the shadow of the child is appearing on top of the parent:
I can't place the parent on top of the child because then the shadow of the parent will show over the child.
Is there a way to maintain the shadow effect for both elements while making them look like one cohesive unit?
Here is a live example: