En résumé, les 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érieure et la ligne inférieure */
/* Vous pouvez changer la couleur */
.content {display:block; background:#0000FF; border:0 solid #FF0000; border-width:0 1px;}Le code HTML :
<b class="bordertop"><b class="coin1"> </b><b class="coin2"> </b><b class="coin3"> </b><b class="coin4"> </b></b>
<div class="content">
Mon contneu<br/>
Avec ses beaux coins
</div>
<b class="boderbottom"><b class="coin4"> </b><b class="coin3"> </b><b class="coin2"> </b><b class="coin1"> </b></b>
... à adapter selon le contexte, la charte graphique, etc. Exemple ici.
0 commentaires:
Enregistrer un commentaire