Comment encadrer un contenu par une box aux bords arrondis ?
C'est assez simple à faire quand il s'agit d'une largeur fixe, mais lorsque la largeur varie, il fallait passer par des artifices souvent périlleux aux affichages différents d'un navigateur à l'autre.
Je me suis donc décidé à faire le tour de quelques sites afin de trouver la solution la plus propre et j'ai fini par la trouver sur un forum.
Le résultat a été placé dans mon dépôt de fichiers.
Tout d'abord, en HTML, le contenu doit être encadré par le code suivant :
<div class="box"><span class="corner_top"><span> </span></span>
''...le contenu...''
<span class="corner_bottom"><span> </span></span></div>
Avec ceci, nous pourrons ajouter les petits coins aux différentes extrémités par le code CSS :
span.corner_top,
span.corner_top span,
span.corner_bottom,
span.corner_bottom span
{
background-repeat: no-repeat;
display: block;
font-size: 1px;
height: 5px;
line-height: 1px;
}
span.corner_top,
span.corner_bottom
{
background-image: url("corner_left.png");
margin: 0 -10px;
}
span.corner_top span,
span.corner_bottom span
{
background-image: url("corner_right.png");
}
span.corner_top { background-position: 0 0; }
span.corner_top span { background-position: 100% 0; }
span.corner_bottom { background-position: 0 100%; }
span.corner_bottom span { background-position: 100% 100%; }
Remarque : Pour que l'affichage s'affiche correctement sur Internet Explorer version 6 et inférieur, on passera par une page
CSS séparée qui affichera les images
corners au format .gif. Les contours sont un peu crénelé mais au moins la transparence sera mieux gérée.
Je me suis longtemps demandé s'il fallait faire des fichiers coins arrondis à chaque fois que l'on changeait de couleur de fond de la boite. Et bien non ! Le principe consiste à gérer la transparence à l'intérieur plutôt qu'à l'extérieur.
Exemple en image :
