在css中實現此選項卡效果

我正在爲我的網站創建一些選項卡，並且我試圖匹配設計，該設計使用了非常不均勻的線條，這在css中顯然很棘手。下面是一個示例：在css中實現此選項卡效果

tabs

現在我使用的引導選項卡來實現選項卡的實際功能。這裏是我開始

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

如何得到這個曲率任何想法？

來源

2013-07-08 Jameo

您可能需要一個邊界或背景圖像的右邊部分 –

耶也許只是爲了曲率。我認爲這可能是一個：之前和：之後的CSS效果？ – Jameo

我會添加一個正確的邊框和一些填充。你可以在一些內容之後，但我不明白這會有什麼幫助。 –

確定這裏是我在這個使用純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

希望這有助於！ :)

來源

2013-07-16 11:40:24 BKC

上設置一個開頭背景我確實說服了我的客戶這是首先，這只是一個壞主意，但你的榜樣非常接近我所要求的，只有在CSS中才能做到這一點！我希望這可以成爲其他人以後的一個很好的例子 – Jameo

在css中實現此選項卡效果

回答

相關問題