Créer des coins arrondis à la Google Analytics avec CSS

Publié le 09 mai 2008 par Dave Lizotte
J'utilise Google Analytics depuis bientôt 1 an et j'ai remarqué un superbe effet de coin arrondi sur leur barre de navigation gauche. Au lieu d'utiliser la méthode des « box », ils ont « supprimé » 1 pixel dans chaque coin. Ceci ne donne pas un coin arrondi réellement, mais l'effet visuel est assez sympa et offre des coins beaucoup plus jolis qu'un coin carré.
 
  Après quelques vérifications, nous avons observé que Google n'utilisait pas d'image pour créer ses coins arrondis. Nous avons donc étudié le tout et nous avons reproduit la technique grâce à quelques balises imbriquées comme ceci :
  <ul>
   <li>
      <a href="http://www.pckult.net/#">
         <b>
            <b>
               Visitors
            </b>
         </b>
      </a>
   </li>
</ul>
Vous me direz que cette technique abuse peut-être un peu des balises, mais ce qui compte ici est le résultat non ? Il existe une technique utilisant plus de balises afin de donner au coin un plus grand radius, mais dans ces cas-là il vaut mieux utiliser une autre approche selon moi.
Voici donc ici le code CSS qui donne tout son sens à cette approche :
li a {
  display:block;
  border: solid #666;
  border-width: 0 1px;
  text-decoration: none;
  outline:none;
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block;
  position:relative;
  top: -1px;
  left: 0;
  border:solid #666;
  border-width:1px 0 0;
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px;
  top: 2px;
}