Une simple technique autorise des angles assez élaborés en utilisant uniquement les propriétés de CSS 2.1

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.

Détail des angles :

Et le code :
===================================

<style type="text/css">
/* Largeur totale de la boite */
.AngleRond {
width:400px;
background-color:transparent;
}

/* définition des pixels d’angles */
.AngleRond .pix1, .AngleRond .pix2, .AngleRond .pix3, .AngleRond .pix4, .AngleRond .pix5 {
display:block;
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
background:#eca;
}

.AngleRond .pix1 {margin:0 5px; background:#000;}
.AngleRond .pix2 {margin:0 4px;}
.AngleRond .pix3 {margin:0 3px;}
.AngleRond .pix4 {margin:0 2px;}
.AngleRond .pix5 {margin:0 1px;}
/* soit au total : 14px de décalage latéral (2*5px + les bordures) */

/* calque de contenu de la boite */
.AngleRond .contenu {
background:#eca;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 5px;
/* largeur: calque AngleRond – 14px (décalage latéral) */
width:386px;
/* centrage du calque de contenu */
margin: 0 auto 0 auto;
}
</style>

===================================

et ces styles sont à appliquer au calque "AngleRond" ainsi :

===================================

<div class="AngleRond">
<b class="pix1"></b>
<b class="pix2"></b>
<b class="pix3"></b>
<b class="pix4"></b>
<div class="contenu"> avec bordure … </div>
<b class="pix4"></b>
<b class="pix3"></b>
<b class="pix2"></b>
<b class="pix1"></b>
</div>

===================================

Ce qui donne :

 

Pour affiner la chose, il reste possible de créer des effets d’ombre en appliquant une couleur blanche uniquement à la bordure de gauche par exemple…

Puissant, non ?