在CSS中实现标签页效果

Question

在CSS中实现标签页效果

4

我正在为我的网站创建一些选项卡，并且我正在尝试匹配设计，其中使用了一些非常不均匀的线条，这在css中显然很难实现。这是一个示例： tabs

目前，我正在使用bootstrap标签来实现标签的实际功能。以下是我的起点： http://jsfiddle.net/PJbhQ/2/

.nav-tabs > li > a{

   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   background-image:linear-gradient(to bottom, #fefefe, #dddedd);
  border-bottom: none;
}
.nav-tabs > li.active > a {
   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   color: @gray;
   background: #ffffff;
   border-bottom: none;
 }

有没有想法如何获得这种曲度？

- Jameo

1

你可能需要为右侧部分添加边框或背景图片。 - Balint Bako

也许只是为了曲率。我想这可能可以通过:before和:after的CSS效果实现？ - Jameo

我会添加一个右边框和一些填充。您可以使用:after添加一些内容，但我不知道那有什么帮助。 - Balint Bako

你所要求的并不容易。这里有一个教程，可以帮助你开始使用圆角边框来制作选项卡，但是使用纯CSS实现斜边将非常棘手。你可能会发现它是不可能的；最好改用SVG来完成。 - Spudley

请查看http://www.css3.info/preview/rounded-border/中的D示例。 - Zach Saucier

1

D绝对不够。我开始尝试http://jsfiddle.net/wMC7F/，看起来最大的问题之一将是在`li:after`上设置一个外部背景（在我的示例中）。 - zessx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chaitan94 · Accepted Answer

好的，以下是我使用纯CSS来实现的非常简单的尝试。

这是示例链接：http://jsfiddle.net/PJbhQ/4/

以下是CSS代码：

.nav-tabs > li > a{

    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    background-image:linear-gradient(to bottom, #fefefe, #dddedd);
    //border-bottom-color: transparent;
    border-radius: 8px 20px 0 0;
    border-bottom: none;
}
.nav-tabs > li > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #dddedd 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "null";
    color:rgba(0,0,0,0);
    height: 20px;
    left: 31px;
    position: relative;
    top: 8px;
    width: 20px;
    z-index: 5;
}

.nav-tabs > li.active > a {
    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    color: @gray;
    background: #ffffff;
    border-bottom: none;
}   
.nav-tabs > li.active > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #fff 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

（HTML和JS是一样的）

我在Inset border-radius with CSS3中使用了渐变来制作凸曲线。

希望这可以帮到你！：）