使用CSS的透明选项卡菜单布局

Question

制作以下布局的最佳方法是什么（灰色区域是一个简单的透明背景，即60％的颜色透明度，角落是切割或圆角）：

我尝试了几个关于标签菜单的教程，但是我标记为红色的部分失败了。我无法弄清楚如何“破解”样式表来制作一条线，它在活动标签下面被打断并且在右边有一个圆角。

我使用简单的彩色背景（不透明）制作了一个解决方案，方法是在活动标签上添加与内容颜色相同的底部边框，并将其向下移动-2 px（叠加）。但这不符合透明度。

请注意：标签的宽度必须灵活（因为它是多语言布局）。

Answer 1

概念证明

我害怕说它可以做到，但这有点乱，我的 解决方案涉及使用具有特定尺寸的元素的绝对位置 当然还有额外的标记。

在灵活的设计中，解决方案可能效果不佳，但我认为它会 说明发布。

诀窍是使用类.active来打开绘制的段 标签元素之前和之后的行。

如果您将.active课程切换到另一个标签，您将看到效果。

注意：标签底部有一个小故障，有时是空白区域 在Firefox中显示某些屏幕尺寸，但它可能是一个神器 StackOverflow的代码段工具。如果你在jsFiddle.net中查看相同的代码，布局似乎有效。

jsfiddle：http://jsfiddle.net/audetwebdesign/hujhmLap/embedded/result/

＆＃13;

＆＃13;

#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;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;