A CodePen by Art Pai. CSS Chrome-like tab

index.html

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

script.js

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

style.css

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;


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

.tab.active {
  z-index:40;
  position:relative;
  padding-bottom:1px;
}
.tab.active .tab-box{
  background:#eee;
}

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

.clear {
 clear:both;
}