Table des matières
Niveau
..........
En rapport...

Quoi ?

Précédement, je vous avais fait un tuto sur comment faire des coin arrondis, en mellant le CSS et le JS.
Voici une technique qui se passe de JS !
Je l'ai dégotée sur http://www.cssplay.co.uk/boxes/snazzy.html
Cette technique est basé sur la précédente. Elle utlise des balise <b> (bold) auquelle on applique un CSS qui va la rendre arrondi.

Exemple

<box 80% round orange|Exemple> Ceci est un exemple de coin arrondis</box>

Code

css
/* La ligne supprérieur et la ligne inférieure */
.bordertop, .boderbottom {display:block; background:transparent; font-size:1px;}
/* Style qui défini les coin arondi */
/* Vous pouvez changer la couleur et la taille (mais avec prudence) */
.coin1, .coin2, .coin3, .coin4 {display:block; overflow:hidden;}
.coin1, .coin2, .coin3 {height:1px;}
.coin2, .coin3, .coin4 {background:#0000FF; border-left:1px solid #FF0000; border-right:1px solid #FF0000;}
.coin1 {margin:0 5px; background:#FF0000;}
.coin2 {margin:0 3px; border-width:0 2px;}
.coin3 {margin:0 2px;}
.coin4 {height:2px; margin:0 1px;}
/* Le contenu, pris entre la ligne supéruieure et la ligne inférieure */
/* Vous pouvez changer la couleur */
.content {display:block; background:#0000FF; border:0 solid #FF0000; border-width:0 1px;}
html4strict
<b class="bordertop"><b class="coin1">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin4">&nbsp;</b></b>
<div class="content">
Mon contneu<br/>
Avec ses beau coin
</div>
<b class="boderbottom"><b class="coin4">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin1">&nbsp;</b></b>
</html>

Explication

Comme vous le voyer l'html peu se dévisé en 3 partie :

html4strict
<b class="bordertop"><b class="coin1">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin4">&nbsp;</b></b>

Ceci est la 1ere ligne, elle va tracer les coin arrondi supérieurs. On remarque que sur cette ligne, les classe “coin” sont placé dans l'ordre croissant.
A cette ligne, suit le contenu, qui va etre pris entre les ligne de coin arrondis :

html4strict
<div class="content">
Mon contneu<br/>
Avec ses beau coin
</div>

Si on s'arrete la, ils manquerais les coin inférieures, c'est donc la ligne suivante qui s'en charge :

html4strict
<b class="boderbottom"><b class="coin4">&nbsp;</b><b class="coin3">&nbsp;</b><b class="coin2">&nbsp;</b><b class="coin1">&nbsp;</b></b>

On remarque ici, que les classe “coin” sont dans l'ordre décroissant.

Si vous supprimez la ligne des coin suprérieur votre boite n'aura pas d'arondi en haut, de même avec les coins inférieurs.