BOURSE

Forum

Réagissez dans les forums de JDN Développeurs

L'engouement actuel pour les boîtes CSS à angles arrondis fait apparaître nombre de techniques requérant l'utilisation de petites images pour simuler cet arrondi.

En effet, seule la spécification CSS3 propose des propriétés pour coins arrondis - plus précisément, border-radius et ses descendants, que l'on trouve dans le document CSS3 Border module.

CSS3 n'est cependant, pour l'heure, qu'un document de travail, et est donc loin d'être implémenté dans les navigateurs d'aujourd'hui. Il faut donc se débrouiller avec la spécification la mieux reconnue à l'heure actuelle, à savoir CSS 2.1.

Le développeur Web Stu Nichols a pris le problème à bras le corps, en proposant avec ses Krazy Korners pas moins de 8 manières d'obtenir autre chose qu'une simple boîte. Sa technique n'utilise aucune image, car elle repose sur une utilisation intelligente des tailles et marges de CSS.

Par exemple, pour un angle à 45°, il utilise simplement 5 balises en ligne (B, en l'occurrence), auxquelles il applique une largeur de 1 pixel pour la bordure, et une marge latérale de 1 à 4 pixels. Cela créé l'illusion de 4 pixels partant de la bordure latérale pour rejoindre la bordure supérieure - celle-ci étant en fait la 5e balise B.

.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
  display:block;
  overflow:hidden;
  height:1px;
  background:#eca;
  border-left:1px solid #000;
  border-right:1px solid #000;
  }

.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}