Inset shadow on non-square-objects in Chrome - css

Question

I'm trying to create a webpage with some tabs and I want the tabs that are not selected to "lie behind" the active tab. I've got different tabs with different appearances, one is plain square but the other is a trapezoid.
I've managed to create the shadow effect on the square tab by using
"-webkit-box-shadow: inset 0 -10px 30px -10px #555;"
but that doesn't work for the trapezoid.
This is a simplified example of my code:
HTML
<div id="first-tab">
</div>
<div id="second-tab">
</div>
<div id="main-content">
</div>
CSS
#first-tab {
position:relative;
float: left;
background-color: #ED3627;
-webkit-box-shadow: inset 0 -10px 30px -10px #555;
width: 100px;
height: 70px;
}
#second-tab {
position:relative;
float: left;
margin-left: 50px;
border-bottom: 70px solid #365F91;
border-right: 40px solid transparent;
height: 0;
width: 60px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
#main-content {
clear:both;
position:relative;
float: left;
height: 100px;
width: 250px;
background-color: #365F91;
}
JSFiddle: http://jsfiddle.net/Nx9ex/
Does anyone have any suggestions how I can fix this?
It only has to work for Chrome!
Thanks!

Answer 1

Not perfect, but can be a start:
demo
It didn't work because the second tab had really a height of 0px, and was in top of the trapezoid, the visible portion being the border.
I changed the method of creating a trapezoid, now it has all the space and the corner is hide setting there a transparent background:
#second-tab {
position:relative;
float: left;
margin-left: 50px;
background: linear-gradient(-114deg, transparent 30px, #365F91 31px);
height: 70px;
width: 100px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
The remaing problem is that the shadow is slightly visible in the transparent border