: css

Des onglets arrondis centrés horizontalement

Une solution css3 pour faire des onglets arrondis. Fonctionne sur les navigateurs récents (IE9, FF4, Safari5, Opera10, Chrome11). Cela reste de simples onglets "carrés" sur les navigateurs plus anciens On joue avec les pseudo-éléments ::before et ::after.

Le centrage horizontal des flottants est effectué à l'aide de 2 position relative.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Onglets arrondis</title>
<style type="text/css">
* {margin:0;padding:0;}

body {padding:20px;background:#eee;}

#main {
width:600px;
margin:0 auto;
}

ul {
list-style:none;
float:right;
position:relative;
right:50%
}

li {
float:left;
position:relative;
left:50%;
margin:0 15px;

}

a {
display:block;
padding:0.2em;
color:white;
text-decoration:none;
background:black;
border:1px solid black;
border-bottom:0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

a::before,a::after,li::before,li::after {
content:"";
position:absolute;
bottom:-1px;
height:10px;
width:10px;
z-index:1;
}

a::before,a::after{
background:black;
border-bottom:1px solid black;
}

a::before {
left:-9px;
}

a::after {
right:-9px;
}

li::before,li::after {
border:1px solid black;
background:white;
z-index:2;
}

li::before {
left:-10px;
border-width:0 1px 1px 0;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

li::after {
right:-10px;
border-width:0 0 1px 1px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
}

#current a,a:hover {
border-bottom:1px solid red;
margin-bottom:-1px;
}

#current a::before,#current a::after {
border-color:red;
}

a:hover, #current a, #current a::after,#current a::before,a:hover::after,a:hover::before {
background:red;
}

#content {
clear:both;
margin-top:-1px;
background:red;
border:1px solid black;
}
</style>
</head>

<body>
<div id="main">
<ul>
<li id="current"><a href="#">onglet 1</a></li>
<li><a href="#">onglet 1</a></li>
<li><a href="#">onglet 1</a></li>
<li><a href="#">onglet 1</a></li>
<li><a href="#">onglet 1</a></li>
</ul>
<div id="content">
contenu <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>

</html>

Editer