Achieve this tabbed effect in css

Question

I create several tabs for my site and I try to match the design that used some very jagged lines, which is obviously hard to do in css. Here is an example:

I am now using boot 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?

Answer 1

Ok, here is my very rude attempt to do 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 the Boundary Radius Insert with CSS3

Hope this helps! :)