CSS的透明選項卡菜單布局

Question

進行以下布局的最佳方法是什么（灰色區域是簡單的透明背景，即具有60％的顏色透明性，並且切角或倒圓角）：

我嘗試了一些有關選項卡菜單的教程，但是在標記為紅色的部分上失敗了。 我無法弄清楚如何“修改”樣式表以創建一行，該行在活動選項卡下被中斷，並且在右側具有圓角。

我通過使用與內容相同的顏色在活動選項卡上添加了下邊框並將其移動到底部的2 px（覆蓋），為背景提供了簡單的彩色背景（不透明）。 但這不能保證透明度。

請注意：標簽的寬度必須靈活（因為它是多語言布局）。

Answer 1

概念驗證

我怕說這是可以做到的，但是這有點混亂，我的解決方案涉及使用具有特定尺寸的元素的絕對位置，當然還有額外的標記。

該解決方案在靈活的設計中可能無法很好地發揮作用，但我認為將其發布是說明性的。

訣竅是使用.active類打開在tab元素之前和之后繪制線條的線段。

如果將.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>