achieve this tabbed effect in css

css, html, twitter-bootstrap

Solution

Ok here's my very crude attempt at this using pure CSS..

Here's the fiddle: http://jsfiddle.net/PJbhQ/4/

Here's the 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 and JS are the same)

I used gradients for the convex curve as seen from Inset border-radius with CSS3

Hope this helps! :)

Problem

I am creating some tabs for my website, and I am trying to match the design, which used some very uneven lines, which is obviously tricky to pull off in css. Here is a sample: Right now I am using bootstrap tabs to achieve the actual functionality of the tabs. Here is my start 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; } ``` Any ideas on how to get this curvature?

Original source

Related problems