html - css でこのタブ効果を実現する

Question

私は自分のウェブサイト用にいくつかのタブを作成しています。デザインを一致させようとしていますが、これは非常に不均一な線を使用しており、CSS でうまくやってのけるのは明らかに難しいです。以下にサンプルを示します。

現在、タブの実際の機能を実現するためにブートストラップ タブを使用しています。これが私のスタートです

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

この曲率を取得する方法についてのアイデアはありますか?