achieve this tabbed effect in css

Question

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:

tabs

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?

You probably need a border or a background image for the right part — Balint Bako, Jul 08 '13 at 14:05
yeah perhaps just for the curvature. Im thinking it may be possible with a :before and :after css effect though? — Jameo, Jul 08 '13 at 14:08
I would add a right border and some padding. You can some content with :after, but I don't see how will that help. — Balint Bako, Jul 08 '13 at 14:11
what you're asking for is not easy. [Here's a tutorial to get you started with round-out tab borders](http://css-tricks.com/better-tabs-with-round-out-borders/), but the sloped edges will be very tricky to achieve with pure CSS. You may find it impossible; it may be better to switch to using SVG for this. — Spudley, Jul 08 '13 at 14:32
http://www.css3.info/preview/rounded-border/ look at example D — Zach Saucier, Jul 08 '13 at 14:37
Example D is definitely not enough. I started a try http://jsfiddle.net/wMC7F/ and it appears one of the biggest problem will be to set an outset background on the `li:after` (in my example) — zessx, Jul 08 '13 at 14:45

score 3 · Accepted Answer · edited May 23 '17 at 12:06

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! :)

I actually convinced my client that this was just a bad idea in the first place, but your example is very close to being what I asked for, kudos for doing it in CSS only! I hope this serves as a good example for others later on — Jameo, Jul 16 '13 at 13:05

achieve this tabbed effect in css

1 Answers1