如何在它们之间创建带拱门的标签？

Question

下面是我正在谈论的图像：

我可以用纯CSS制作吗？

更新：我在右上角和左上角创建了带圆角（使用border-radius）的div，并将它们放在标签之间。仍在寻找更优雅的解决方案。

Answer 1

执行此操作的最佳方法是在菜单项上叠加元素，菜单项本身具有border-radius。此元素必须与菜单的容器具有相同的背景颜色。

这些叠加应该使用伪类: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/

Answer 2

是的，使用border-radius属性。但是，border-radius是一个CSS3属性。

Answer 3

在这里你可以使用负边界半径

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

它可能在所有浏览器中都不合规，最安全的是使用图像作为向外半径

更新我的答案以使用没有负半径的纯CSS http://jsfiddle.net/peter/QTS6N/1/

Answer 4

你可以尝试使用'负边界半径'，基本上是径向渐变（可能不是跨浏览器兼容的，可能值得使用图形）。看看this article。祝你好运！