Стиль вкладок CSS3

by Andrey Dobrovoi

HTML

<div class="tabs">
<ul>
  <li>Вкладка 3</li>
  <li>Вкладка 2</li>
  <li class="active">Вкладка 1</li>
</ul>
</div>

CSS

* {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
body{background: #F7F7F7;}
.tabs {
	width:80%;
	min-width:400px;
	margin:0 auto;
	padding-top:68px;
	border-bottom:1px solid #ccc;
	overflow:hidden;
}
ul { 
    overflow:hidden;
    float:left;
    padding-left:14px;
    padding-right: 14px;
}
li {
	display: block;
	float: right;
	padding: 5px 14px 3px;
    border-top:1px solid #ccc;
    background-color: #e4e4e4;
    border-radius:6px;
	margin-right:8px;
	position:relative;
	cursor:pointer;
	color:#555;
	text-transform:none;
	font:normal 12px/15px Arial, Helvetica, sans-serif;
}
li:before, li:after {
	display:block; content:" "; position:absolute;  top:0; height:100%; width:16px; 	
	background-color: #e4e4e4;
}
li:before {
	right:-4px;
	transform: skew(25deg, 0deg) ;
	-webkit-transform: skew(25deg, 0deg) ;
	-moz-transform: skew(25deg, 0deg) ;
	-o-transform: skew(25deg, 0deg) ;
	-ms-transform: skew(25deg, 0deg) ;
	border-radius:0 4px 0 0;
    border-right:1px solid #ccc;
	box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
	left:-4px;
	transform: skew(-25deg, 0deg) ;
	-webkit-transform: skew(-25deg, 0deg) ;
	-moz-transform: skew(-25deg, 0deg) ;
	-o-transform: skew(-25deg, 0deg) ;
	-ms-transform: skew(-25deg, 0deg) ;
    border-left:1px solid #ccc;
	border-radius:4px 0 0 0;
}
li:hover, li:hover:before, li:hover:after {
	background-color:#e9e9e9;
}
.active, .active:before, .active:after, .active:hover, .active:hover:before, .active:hover:after { background-color:#f4f4f4; color:#555;}
.active {z-index:3;}