onglets

by polinux

HTML

<nav>
<ul>
	<li>
		<input type="radio" id="rd_1" name="rd_nav" checked="" />
		<label for="rd_1">
			A propos
		</label>
	</li>
	<li>
		<input type="radio" id="rd_2" name="rd_nav" checked="" />
		<label for="rd_2">
			Rechercher
		</label>
	</li>
	<li>
		<input type="radio" id="rd_3" name="rd_nav" checked="" />
		<label for="rd_3">
			DĂ©couvrir
		</label>
	</li>
	<li>
		<input type="radio" id="rd_4" name="rd_nav" checked="" />
		<label for="rd_4">
			Partager
		</label>
	</li>
</ul>
</nav>

CSS

nav li {
}

nav ul {
	margin: 0;
	border-bottom:solid 1px black;
}

nav li {
    list-style: none outside none;
	display: inline;
	margin: 0 12px;
}

nav li label:after, nav li label:before {
    content: " ";
    height: 80%;
    position: absolute;
    width: 50%;
    z-index: -10;
}

nav li label:before {
/*    box-shadow: -7px 0 10px #555555; */
    height: 100%;
    left: 0;
    top: 0;
	transform: skew(-15deg, 0deg);
    transform-origin: 0 0 0;
}

nav li label:before {
    background: none repeat scroll 0 0 #5C7950;
}

nav li label:after {
    width: 100%;
    height: 1px;
	left:0;
	top:100%;
}

nav li input:checked + label {
	margin-top: 0;
	margin-bottom: -16px;
	padding-bottom: 24px;
}
nav li input:checked + label:before {
	transform: skew(-15deg, 0deg) scale(1.0, 0.86);
}

nav li input:checked + label:after {
    box-shadow: 0px 0px 1px #000 inset,
				16px 0 1px #000, -16px 0 1px #000,
				12px -1px 2px #000, -12px -1px 2px #000,
				8px -3px 3px #000, -8px -3px 3px #000,
				4px -4px 4px #000, -4px -4px 4px #000;
	border-left-width:24px;
	border-left-color:#000;
 /*   background: none repeat scroll 0 0 red;*/
    background: none repeat scroll 0 0 transparent;
}

.nobg {
    background: none repeat scroll 0 0 transparent;
}

nav input[type="radio"] {
    height: 1px;
    width: 1px;
    opacity: 0;
    position: absolute;
}

nav li input:checked + label {
	background-color: #C58ABF;
}

nav li label {
	background: none repeat scroll 0 0 #86C425;
	box-shadow: 0 0 4px ##9F73A5;
	display: inline-block;
	font-family: MuseoThree, 'Century Gothic', 'Futura Medium', 'Apple Gothic', Helvetica, Arial, sans-serif;
	font-size: 1.4em;
	line-height: 2em;
	margin-left: 24px;
	padding: 12px;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 160px;
	color: #3E474E;
	text-shadow: 0 1px 1px #D8E8F7;
}