我一直纠结于如何为设计机构提供的这些倒置弯曲选项卡编写 CSS 代码。
见这里： http: //max-guedy.com/images/tab.png
问问题
2475 次
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
于 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 分钟内瘦下来。
于 2015-09-24T23:05:10.790 回答