Html 在css中实现这种选项卡式效果

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

现在我正在使用引导选项卡来实现选项卡的实际功能。这是我的开始

---

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

好的，下面是我使用纯CSS进行的非常粗糙的尝试

这是小提琴：

以下是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是相同的）

我对凸曲线使用了渐变，从

---

希望这有帮助！：）

你可能需要一个边框或者一个背景图片来显示右边的部分，也许只是为了曲率。我想可能会有一个：before和：after的css效果？我会添加一个右边框和一些填充。你可以满足于：之后，但我不认为这会有什么帮助。你所要求的并不容易，但是，使用纯CSS实现倾斜边将非常困难。你可能会发现这是不可能的；为此，最好切换到使用SVG。示例D显然是不够的。我开始了一次尝试，最大的问题之一似乎是在

上设置一个开始的背景。李：在
之后（在我的例子中），我实际上说服了我的客户，从一开始这只是一个坏主意，但你的例子非常接近我所要求的，只在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%;
}