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 (reste à savoir comment Internet Explorer supporte border-radius).

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;}