如何在它們之間創建帶有拱門的選項卡？

Question

下面

是什麼我談論的圖像：

我可以讓這個純CSS？

更新：我創建了具有圓角（使用邊框半徑）在右上角和左上角的div並將它們放置在選項卡之間。仍在尋找更優雅的解決方案。

Answer 1

是的，使用border-radius屬性。但是，border-radius是一個CSS3屬性。

Answer 2

在這裏，您可以使用負邊界半徑

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

它可能不是在所有瀏覽器兼容，你最安全的使用圖像用於向外半徑

更新我的答案用純CSS無負半徑 http://jsfiddle.net/peter/QTS6N/1/

Answer 3

你可以嘗試使用'負邊界半徑'，基本上是徑向漸變（可能不是跨瀏覽器兼容可能值得使用圖形）。看看this article。祝你好運！

Answer 4

要做到這一點，最好的方法是在菜單項上覆蓋一個元素，該元素具有邊框半徑本身。該元素必須與菜單的容器具有相同的背景顏色。

這些覆蓋圖應該使用僞類:before和:after來完成。那些也有很好的browser support。

HTML：

<ul class="tabs"> 
    <li><a href="#">Archive</a></li> 
    <li><a href="#">Forum</a></li> 
    <li><a href="#">Store</a></li> 
    <li><a href="#">Patv</a></li> 
</ul> 
<br style="clear:both;" /> <!-- I didn't have an other element to clear the floats with --> 

CSS：

.tabs { /* generates the grey line on the very top */ 
    width: 100%; 
    height: 5px; 
    background: grey; 
} 

.tabs li { 
    list-style-type: none; 
    float: left; 
} 

.tabs li:first-child { 
    margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */ 
} 

.tabs a { 
    text-underline: none; 
    color: black; 
    line-height: 30px; 
    padding: 10px 20px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    background: grey; 
} 

.tabs a:after, .tabs li:first-child a:before { 
    content: ''; 
    width: 4px; 
    height: 25px; 
    background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */ 
    position: absolute; 
    margin-top: 5px; 
    margin-left: -3px; 
    border-radius: 10px; 
} 

.tabs a:after { 
    margin-left: 18px; 
} 

這裏有一個演示：http://jsfiddle.net/rGubz/