Grâce à cette astuce, il vous sera possible de réaliser un div aux formes arrondies, et de couleur paramétrable, tout ceci facilement !

Div Arrondi

L'idée est relativement simple, mais s'avère simplement géniale. En fait, le principe du script de ce  "div arrondi" est d'utiliser une très fine zone de texte (invisible) pour créer nos côtés.

Pour se faire, voici le conteu du "script" css. Il devrait être placé (sans les balises <style et </style, première et dernière ligne donc dans votre fichier .css. Si vous voulez juste tester, placez l'intégralité de  ce code dans votre page web.



Code Css


<style type="text/css">

.divarrondi { background:#0099CC; width:345px;  }

b.dtop, b.dbas{display:block;background:#FFFFFF; font-size:1px; }
b.dtop b, b.dbas b{display:block;height: 1px; font-size:1px;
    overflow: hidden; background:#0099CC;}
b.r1{margin: 0 5px ; font-size:1px;}
b.r2{margin: 0 3px ; font-size:1px;}
b.r3{margin: 0 2px ; font-size:1px;}
b.dtop b.r4, b.dbas b.r4{margin: 0 1px;height: 2px; font-size:1px;}
</style>



N'oubliez pas la partie font-size:1px. Cette dernière s'avère importante, en effet, elle empêche un vilain bug d'affichage d'internet explorer.

La partie du .divarrondi sera celle qui devrait être modifié. width signifie donc sa taille (exprimée ici en px), et le background sa couleur de fond.

b.dtop, b.dbas{display:block;background:#FFFFFF; Ceci va donner comme couleur d'arrière plan ( à nos côtés ) une valeur "blanche". Changez là si votre page est d'une autre couleur.


donc

Et voici le contenu de notre div arrondi  à intégrer dans une page de votre site :

<div class="divarrondi">
  <p><b class="dtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><h1>Titre</h1> Et Blabla Blabla bla! <br/>
    <span class="Style2">Voici notre super div arrondi ! </span></p>
  <p>Pour r&eacute;aliser ce div, merci de lire l'explication :o)  <b class='dbas'><b class='r4'></b><b class='r3'></b><b class='r2'></b><b class='r1'></b></b></p>
</div>


La partie contenu dans notre Tout ce qui commence avec <h1> et finit par le <b class='dbas'> peut être modifié pour intégrer du texte, des images, des tableaux (table) ou autre.