Tabs with dropshadow only around active - html

Question

Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks

Answer 1

Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}