title: achieve this tabbed effect in css
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/WC1OX.png" alt="tabs"></p>
  
  <p>Right now I am using bootstrap tabs to achieve the actual functionality of the tabs.  Here is my start </p>
  
  <p><a href="http://jsfiddle.net/PJbhQ/2/" rel="nofollow noreferrer">http://jsfiddle.net/PJbhQ/2/</a></p>
  
  <pre><code>.nav-tabs &gt; li &gt; 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 &gt; li.active &gt; a {
     box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
     color: @gray;
     background: #ffffff;
     border-bottom: none;
   }
  </code></pre>
  
  <p>Any ideas on how to get this curvature? </p>