Coins arrondis en JQuery
Cet exemple montre comment afficher des balises DIV à coins arrondis comme pour le cadre ci-dessous :
Ce message est dans un tableau à fond transparent, et le tableau est dans un DIV à fond coloré et à coins arrondis |
Comment afficher des coins arrondis sur une page web ?
Il faut tout d'abord utiliser l'extension (plugin) corner de JQuery disponible sous la forme d'un fichier jquery.corner.js :
<script type="text/javascript" src="http://www.gecif.net/scripts/jquery.corner.js"></script>
Ensuite le DIV dont on veut arrondir les coins doit avoir un ID unique (ici mon_div) :
<div id="mon_div" style="background:#33CCFF; width:80%; "align="center"></div>
Enfin il suffit d'appeler la fonction corner de jquery.corner.js :
$(document).ready(function(){
$("#mon_div").corner("30px");
});
Cliquez ici pour voir les différentes possibilités du plugin jquery.corner.js
Réalisé par Jean-Christophe MICHEL
Juillet 2015