html - 在CSS中实现这种标签效果

Question

我正在为我的网站创建一些标签，我正在尝试匹配设计，它使用了一些非常不均匀的线条，这显然很难在 css 中实现。这是一个示例:

现在我正在使用 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;
 }

关于如何获得这个曲率有什么想法吗？

Answer 1

好的，这是我使用纯 CSS 进行的非常粗略的尝试..

这是 fiddle :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 所示

希望对您有所帮助! :)