HTML雙曲線標籤設計

Question

任何方式來做這種標籤設計？我似乎無法在線獲得好的代碼來完成它。每個標籤有兩個邊界半徑。它甚至有可能嗎？

Answer 1

這是絕對有可能的，但有點棘手，因爲效果要稍微模擬。例如，對於中間選項卡的右邊緣，必須使用中間選項卡上的border-radius定義頂部邊界曲線，但底部曲線必須使用右邊的標籤上的選項卡定義。效果的其餘部分通過使用適當背景色的選項卡後面的元素來完成。

Answer 2

有幾種方法可以完成圖像。例如，你可以用透明PNG做背景圖像。

Answer 3

您可以使用每個選項卡that.set邊界內部DIV並設置邊框爲您的主選項卡，現在你有兩個邊境

Answer 4

快速谷歌搜索「的CSS彎曲標籤」給出了一個很好的文章作爲第一次打擊的css-tricks.com：(Better) CSS Tabs With Round Out Borders。該代碼是在那裏複製和粘貼，但這裏涉及到的CSS技巧的總結：

• 使用的CSS :before和:after僞元素創建標籤的圓潤與曲面邊界半徑風格的元素。 （這些具有position: absolute的僞元素基本上提供了兩個額外的繪圖層 - 想象一下在選項卡的<li> html元素頂部分層顯示一張透明表，並在上面繪製標籤的圓形元素）。
• 在圓形元素上使用巧妙的陰影設置來隱藏底層<li>元素的方形邊緣。
• 在<li>元素上使用輕微的負邊距可以使選項卡相互重疊。

這使所有css樣式都保留在同一個元素上，並且可以使用不同的漸變，顏色方案和樣式元素輕鬆配置。