3

我一直纠结于如何为设计机构提供的这些倒置弯曲选项卡编写 CSS 代码。

在此处输入图像描述

见这里： http: //max-guedy.com/images/tab.png

4

6 回答 6

3

编辑添加了hover state.

我创建了一个演示，我将如何做到这一点：

jsBin 演示

  • 我们将棕色设置为整个 ul 元素
  • 曲线的 25x52 精灵图像 .png ：（将在悬停时更改背景位置） http://img401.imageshack.us/img401/258/bg2d.png我们将设置为li元素但没有背景颜色。
  • 这里最重要的是为li元素设置更高的 z-index，在hover
  • 注意设置a元素左填充和相应的 -left 边距，以允许锚点“隐藏”在前一个元素图像下方。

完成后，您可以拥有越来越宽的链接，您的模板就可以完成工作！

这个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;
  }
于 2012-05-20T22:08:08.213 回答
2

用 CSS 实现这种事情几乎是可能的。

非常困难，但可能。

默认情况下，border-radius当然只会给你常规的圆角。

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

但这里真正的技巧是使用 CSS:before和:after伪选择器来创建额外的样式元素，以获取选项卡的圆形部分，您需要在其中添加更多border-radius.

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

还要记住，这些都不适用于旧版本的 IE。IE8 支持:beforeand :after，但不支持border-radius。虽然存在像 CSS3Pie 这样的黑客来解决这个问题，但我不建议将它们用于此类事情。它很可能会破裂。

如果上述所有内容听起来很棘手并且不值得，我倾向于同意。我想您会发现在这种情况下，一些简单的图像会更适合您的选项卡。如果你想聪明一点，你也可以尝试 SVG 来绘制它们，但这也会在旧版本的 IE 中出现问题。

希望有帮助。

于 2012-05-20T22:11:12.017 回答
1

使用图像更容易。

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

于 2012-05-20T21:59:51.063 回答
1

这是一个有趣的挑战。

我的第一个想法是对选项卡应用倾斜变换，将边框半径应用到右上角，并使用伪元素处理圆形下部。

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

尽管如此，我还是觉得必须有更好的方法来使用纯 CSS 来做到这一点。

于 2012-05-20T22:50:17.353 回答
0

我会说这是可能的，但是花费的时间是不值得的，特别是因为它在 IE < 9 中不起作用......

我过去在css-tricks有一个很好的教程

但是，正如其他人指出的那样，我建议使用图像。

于 2012-05-20T22:06:38.890 回答
0

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

HTML

<div role="tablist">
    <a href="#" role="tab" aria-controls="active-tab1" aria-selected="true">active tab</a>
    <a href="#" role="tab" aria-controls="active-tab2">inactive tab</a>
    <a href="#" role="tab" aria-controls="active-tab3">inactive tab</a>
</div>

<div class="pane">
    <section id="active-tab1" role="tabpanel">
        <p>Show whatever</p>
        <p>You Want</p>
        <ul>
            <li>inside</li>
            <li>This</li>
            <li>Section</li>
        </ul>
    </section>
    <section id="active-tab2" role="tabpanel">
    </section>
    <section id="active-tab3" role="tabpanel">
    </section>
</div>

CSS

[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;
}

而且你甚至可以在大约 10 分钟内瘦下来。

http://jsfiddle.net/darcher/819yz9Ly/

于 2015-09-24T23:05:10.790 回答