Tab Menu Using CSS Only

Create a tabbed menu effect using CSS only, no images.

<style>
#tabs {
	margin:30px auto 0 auto;
	width:70%;
	text-align:center;
}
#tabs a {
	text-align:center;
	display:inline-block;
	margin:0 1% 0 0;
	padding:0;
	width:19%;
	position:relative;
	text-decoration:none;
	color:white;
	line-height:33px;
	background:#38c;
	-webkit-border-radius:5px 0 0 0;
	-moz-border-radius:5px 0 0 0;
	border-radius:5px 0 0 0;
	border-top:1px solid #458;
	border-left:1px solid #458;
}

#tabs a::after {
	content:'';
	position:absolute;
	z-index:1;
	top:-1px;
	right:-16px;
	bottom:0;
	width:30px;
	background:#38c;
	-webkit-transform:skew(40deg);
	-moz-transform:skew(40deg);
	-ms-transform:skew(40deg);
	-o-transform:skew(40deg);
	transform:skew(40deg);
	-webkit-border-radius:0 5px 0 0;
	-moz-border-radius:0 5px 0 0;
	border-radius:0 5px 0 0;
	border-top:1px solid #458;
	border-right:1px solid #458;
}
</style>

Example:

HTML: This is the HTML portion of the menu

<div id="tabs">
<a href="javascript:alert('Tab 1')">Tab 1</a>
<a href="javascript:alert('Tab 2')">Tab 2</a>
<a href="javascript:alert('Tab 3')">Tab 3</a>
<a href="javascript:alert('Tab 4')">Tab 4</a>
</div>

Produces the result below: 

Content here