如何在它们之间创建带有拱门的选项卡？

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/