jsBin demo

我们将棕色设置为整个ul元素
曲线的25x52精灵图像.png :(将在悬停时改变bg位置） http://img401.imageshack.us/img401/258/bg2d.png我们将设置为li元素但没有bg颜色。
此处最常用的是为li元素设置更高的z-index，在hover
注意设置为a元素左侧填充和相应的左侧边距，以允许锚点“隐藏”在上一个元素图像下方。

完成您可以拥有更广泛和更广泛的链接，您的模板将完成工作！

和这个CSS：

  ul#nav{
    height:26px;
    background:#A15049;
    border-bottom:1px solid #fff;
  }
  ul#nav li{
    position:relative;
    background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
    height:26px;
    display:inline;
    float:left;
    padding:0 25px 0 5px;
    z-index:1;
  }
  ul#nav li a{
    padding-left:24px;
    margin-left:-24px;
    height:26px;
    display:block;
    color:#fff;
  }

  ul#nav li:hover{
    z-index:0;
    background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
  }
  ul#nav li:hover a{
    background:#CE392C;
  }

Answer 2

使用CSS可以实现这种功能。

非常困难，但可能。

默认情况下，border-radius当然只会为您提供常规的圆角。

您可以通过调整半径值将它们拉伸到一些有趣的形状。这将为您提供一些达到目标的方法。

但是，获取选项卡的四舍五入部分的真正技巧是使用CSS :before和:after伪选择器来创建其他样式元素，您需要再添加border-radius。

这里描述了这种技术：http://css-tricks.com/better-tabs-with-round-out-borders/ ...虽然是一个相当简单的垂直形状的标签。但是它很好地解释了如何实现转出效果，如果你想在CSS中这样做，这对你来说至关重要。

请记住，这些都不适用于旧版本的IE。 IE8确实支持:before和:after，但不支持border-radius。虽然像CSS3Pie这样的黑客存在修复它，但我不建议将它们用于此类事情。它可能会破裂。

如果以上所有听起来都很棘手并且不值得，我倾向于同意。我想你会发现在这个例子中，一些简单的图像对你的标签会更好。如果你想要聪明的话，你也可以尝试使用SVG来绘制它们，但这也会对旧版本的IE产生问题。

希望有所帮助。

Answer 3

使用图片更容易。

但如果你坚持使用CSS，我会说你需要使用很多border-radius

Answer 4

这是一个有趣的挑战。

我的第一个想法是对标签应用偏斜变换，右上角的边框半径，并使用伪元素处理圆形的下半部分。

不幸的是，这看起来很丑陋http://dabblet.com/gist/2759785

但是，让我觉得必须有更好的方法来使用纯CSS。

Answer 5

我想说这是可能的，但是花费的时间不值得，特别是因为它不适用于IE＆lt; 9 ...

过去在css-tricks

上有一个很好的教程

然而，正如其他人所指出的，我建议使用图像。

Answer 6

实现这一点真的不需要太多的CSS。当然，你必须玩半径'来获得所需的倾斜度。

<强> HTML

[role=tablist]{padding:15px 15px 0;margin-left:88px;}

[role=tab]{
    color:#222;
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    text-decoration:none;
    line-height:44px;
    position:relative;
    min-width:150px;
    text-align:center;
    border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
    background-color:#3498db;
    color:white; }
[role=tab]:before,
[role=tab]:after{
    content:'';
    border-bottom:10px solid #3498db;
    position:absolute;
    bottom:-10px;
    width:44px;
    height:22px;
    z-index:1; }
[role=tab][aria-selected=true]:before{
    left:-44px;
    border-right:10px solid #3498db;
    border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
    right:-44px;
    border-left:10px solid #3498db;
    border-bottom-left-radius:25px;
}

.pane{
    background-color:#3498db;
    padding:25px;
    margin-left:5px;
    margin-right:5px;
    color:white;
    border-radius:15px;
}

<强> CSS

<div id="images"><img class="img" src="" alt="" /></div>

.img
{
    width=100%;
}

很可能你甚至可以减肥，大约10分钟就可以了。

http://jsfiddle.net/bh6t2h78/2/

用于倒置弯曲标签的CSS

6 个答案:

jsBin demo