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

Question

制作以下布局的最佳方法是什么(其中灰色区域是简单的透明背景，即具有 60% 的颜色透明度并且 Angular 被切割或圆 Angular ):

我尝试了几个关于选项卡菜单的教程，但我在标记为红色的部分失败了。我不知道如何“破解”样式表来制作一条线，该线在事件选项卡下方被打断并且右侧有一个圆 Angular 。

我通过在事件选项卡上添加与内容颜色相同的底部边框并将其移动 -2 像素到底部(覆盖)来制作具有简单彩色背景(不透明)的解决方案。但这不适用于透明度。

请注意:标签的宽度必须灵活(因为它是多语言布局)。

Answer 1

概念验证

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

该解决方案在灵活的设计中可能不太适用，但我认为它会 说明性地张贴它。

诀窍是使用类 .active 来打开绘制 选项卡元素前后的行。

如果将 .active 类切换到另一个选项卡，您将看到效果。

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

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>