Html 带有CSS的透明选项卡菜单布局

制作以下布局的最佳方法是什么（其中灰色区域是简单的透明背景，即60%的颜色透明度，并且角被切割或圆角）：

我尝试了一些关于选项卡菜单的教程，但在我标记为红色的部分失败了。我不知道如何“破解”样式表以生成一行，该行在活动选项卡下方中断，并在右侧有一个圆角

我用简单的彩色背景（非透明）制作了一个解决方案，在活动选项卡上添加一个与内容颜色相同的底部边框，并将其移动到底部（覆盖）。但这不符合透明度

---

请注意：选项卡的宽度必须灵活（因为它是多语言布局）

概念验证

我不敢说这是可以做到的，但这是一个有点混乱和我的工作 解决方案包括使用具有特定尺寸的元素的绝对位置， 当然，还有额外的标记

这个解决方案在灵活的设计中可能不太有效，但我认为它会 张贴它要有说明性

诀窍是使用类

.active

打开绘制图形的线段 tab元素前后的行

如果将

.active

类切换到其他选项卡，您将看到效果

注意：选项卡底部有一个小故障，有时是空白 在Firefox的特定屏幕尺寸上显示，但它可能是 StackOverflow的代码段工具。如果您在jsFiddle.net中查看相同的代码，那么布局似乎是可行的

jsfiddle：

#选项卡列表{
宽度：400px；
高度：42px；
位置：相对位置；
}
.tab-panel-1{
宽度：400px；
高度：42px；
位置：绝对位置；
排名：0；
左：0；
显示：块；
}
.tab-panel-2{
宽度：400px；
高度：42px；
位置：绝对位置；
排名：0；
左：0；
显示：块；
}
.标签{
背景色：rgba（125、125、125、0.25）；
边框左上半径：5px；
边框右上角半径：5px；
边框：实心2px#000；
边界底部：0；
显示：块；
文本对齐：居中；
填充：10px0；
宽度：80px；
高度：30px；
}
.t1{
位置：绝对位置；
左：0px；
顶部：0px；
}
.fill1{
位置：绝对位置；
左：82px；
右：0px；
底部：-5px；
高度：5px；
边框顶部：2件纯黑；
右边框：2倍纯黑；
边框右上角半径：5px；
}
.t2{
位置：绝对位置；
左：100px；
顶部：0px；
}
.pre2{
位置：绝对位置；
左：0px；
右：计算（400px-100px-2px）；
底部：-5px；
高度：5px；
边框顶部：2件纯黑；
左边框：2倍纯黑；
边框左上半径：5px；
边框右上角半径：0px；
}
.fill2{
位置：绝对位置；
左：计算（100px+80px+2px）；
右：0px；
底部：-5px；
高度：5px；
边框顶部：2件纯黑；
右边框：2倍纯黑；
边框右上角半径：5px；
}
#内容框{
背景色：rgba（125、125、125、0.25）；
边框左下半径：5px；
边框右下半径：5px；
边框右上角半径：0px；
边框：实心2px#000；
边界顶部：无；
高度：200px；
填充：20px；
宽度：356px；
}
.t1、.1、，
.pre2、.t2、.fill2
{
显示：无；
}
.active.t1、.active.fill1、，
.active.pre2、.active.t2、.active.fill2
{
显示：块；
}

表1
表2
你好，世界！

查看我已经查看了jQuery UI框架，但是我看不到像上面所描述的那样定义透明背景的可能性。它也有不同的基本布局（尤其是右角将再次成为问题，因为选项卡位于另一个容器中）。