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: