<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');
});
This Pen doesn't use any external CSS resources.