<div class="tabs">
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab active"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>

</div>
  <div class="content">
    
  </div>
@import "compass/css3";

body {
  padding:100px;
}
.tabs {
  height:45px;
  padding: 0 0 0 0;
  overflow:visible;
}
.tab {
  width:200px;
  height:45px;
  overflow:hidden;
  float:left;
  margin:0 -15px 0 0;
}


.tab-box {
  height:50px;
  background: #fff;
  border-radius: 4px;
  border:1px solid #ccc;
  margin:0 10px 0;
  box-shadow: 0 0 2px  #fff inset;


 -webkit-transform: perspective(100px) rotateX(30deg);
 -moz-transform: perspective(100px) rotateX(30deg);
  
}

.tab.active {
  z-index:40;
  position:relative;
  padding-bottom:1px;
}
.tab.active .tab-box{
  background-color: #eee;
  @include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5)  ));
  box-shadow: 0 0 2px 0 #fff inset;
}

.content {
  z-index:1;
  padding:100px;
  border:1px solid #ccc;
  background:#eee;
  position:relative;
  
}

.clear {
 clear:both;
}
View Compiled

$('.tab').click(function(){
  $('.tab').removeClass('active');
  $(this).addClass('active');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js