Transparent tab menu layout with CSS - html

Question

What is the best way to make the following layout (where the grey area is a simple transparent background, i.e. with 60% color transparency and the corners are cut or rounded):
I tried several tutorials regarding tab menus, but i failed on the parts that i marked red. I can't figure out how to "hack" the stylesheets to make a line, that is interrupted below the active tab AND has a rounded corner on the right.
I made a solution with a simple colored background (not transparent) by adding a bottom-border on the active tab in the same color as the content and moving it -2 px to the bottom (overlay). But this does not work with transparency.
Please note: The tabs have to be flexible regarding their width (because it is a multi-language layout).

Answer 1

Proof of Concept
I am afraid to say that it can be done, but it is a bit of a mess and my
solution involves using absolute position of elements with specific dimensions,
and of course, extra markup.
The solution may not work too well in a flexible design, but I thought it would
be illustrative to post it.
The trick is to use the class .active to turn on the segments that draw the
lines before and after the tab element.
If you switch the .active class to the other tab, you will see the effect.
Note: There is a glitch towards the bottom of the tab, sometimes a white space
shows up on certain screen sizes in Firefox, but it could be an artifact of
the snippet tool of StackOverflow. If you look at the same code in jsFiddle.net, the layout seems to work.
jsfiddle: http://jsfiddle.net/audetwebdesign/hujhmLap/embedded/result/
#tab-list {
width: 400px;
height: 42px;
position: relative;
}
.tab-panel-1 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab-panel-2 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab {
background-color: rgba(125, 125, 125, 0.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: solid 2px #000;
border-bottom: 0;
display: block;
text-align: center;
padding: 10px 0 0 0;
width: 80px;
height: 30px;
}
.t1 {
position: absolute;
left: 0px;
top: 0px;
}
.fill1 {
position: absolute;
left: 82px;
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
.t2 {
position: absolute;
left: 100px;
top: 0px;
}
.pre2 {
position: absolute;
left: 0px;
right: calc(400px - 100px - 2px);
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-left: 2px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 0px;
}
.fill2 {
position: absolute;
left: calc(100px + 80px + 2px);
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
#content-box {
background-color: rgba(125, 125, 125, 0.25);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 0px;
border: solid 2px #000;
border-top: none;
height: 200px;
padding: 20px;
width: 356px;
}
.t1, .fill1,
.pre2, .t2, .fill2
{
display: none;
}
.active .t1, .active .fill1,
.active .pre2, .active .t2, .active .fill2
{
display: block;
}
<div id="tab-list">
<div class="tab-panel-1 ">
<span class="tab t1">Tab 1</span><span class="fill1"></span>
</div>
<div class="tab-panel-2 active">
<span class="pre2"></span><span class="tab t2">Tab 2</span><span class="fill2"></span>
</div>
</div>
<div id="content-box">
Hello World!
</div>