Trucs Et Astuces CSS : 9 Des éléments Bien En Forme : Cercles Et ...

Chapitre 1 Généralités sur les éléments Retour Accueil CSS

9 Des éléments bien en forme : cercles et ellipses

Termes CSS clés employés : transform, border-radius Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari avec préfixe, Opera12.1+.

Nous avons déjà vu dans l’astuce « Boutons » qu’il était possible d’obtenir un cercle à l’aide de la propriété border-radius. Mais cette propriété permet bien d’autres choses.

Formes elliptiques normales

En choisissant une valeur égale à la moitié du côté d’un élément carré, vous obtenez un cercle. {height:2rem;width:2rem; border-radius:1rem;} /* cercle */ Avec des valeurs appariées, vous obtenez une ellipse {height:2rem;width:2rem; border-radius: 1rem 3rem 1rem 3rem"} /* ellipse */ Avec 4 valeurs différentes un patadoïde : {height:2rem;width:3rem; border-radius: 1rem 1.8rem 4rem 3rem} /* patatoide */ L’ellipse régulière précedemment obtenue est toutefois inclinée et vous devez effectuer une rotation pour la rendre horizontale : {height:2rem;width:2rem; border-radius: 1rem 2rem 1rem 2rem; transform:rotate(-45deg);} Une autre solution sera de modifier l’échelle horizontale ou verticale à partir d’un cercle. {height:2rem;width:2rem; border-radius: 1rem; transform:scaleX(1.5);}

Formes elliptiques complètes.
Cercleheight = width =aborder-radius: a/2;	Ellipseheight : a; width: b;border-radius: c d c d;	Patatoïdeheight : a; width : b;border-radius: c d e f;	Ellipse horizontale Iheight : a; width : b;border-radius: a/2transform:scaleX(1.5);	Ellipse horizontale IIheight : a; width : b;border-radius: c d c d;transform:rotate(-45deg);

Formes elliptiques partielles

Sachant qu’un carré n’est rien d’autre qu’un cercle qui a mal tourné, en jouant sur les deux angles du haut d’un élément carré, vous obtenez un demi-cercle : {height:2rem;width:4rem; border-radius:2rem 2rem 0 0;} /* demi cercle */ En n’affectant un arrondi qu’à un des angles, vous obtenez un quart de cercle : {height:2rem;width:2rem; border-radius:2rem 0 0 0;"} /* quart de cercle*/ En affectant à l’angle inférieur droit la même valeur qu’à l’angle supérieur gauche, vous obtenez un pétale : {height:2rem;width:2rem; border-radius:4rem 0 4rem 0;} /* pétale */ Bien sûr, vous pouvez réorienter la forme obtenue et même la modifier pour obtenir des secteurs d’angles différents, comme un huitième de cercle ici : {height:2rem;width:2rem; border-radius:2rem 0 0 0; transform:rotate(45deg);} /* quart de cercle horizontal */ {height:2rem;width:2rem; border-radius:2rem 0 0 0; transform:scale(.5, 1) rotate(45deg);} /* huitième de cercle horizontal */

Formes elliptiques partielles.
Demi-cercleheight = a/2 width =aborder-radius: a/2 a/2 0 0;	Quart de cercleheight = width = a;border-radius: a 0 0 0;	Pétaleheight = width = a;border-radius: 2a 0 2a 0;	Quart de cercle horizontalheight = width = a;border-radius: a 0 0 0;transform:rotate(45deg);	Huitième de cercle horizontalheight = width = a;border-radius: a 0 0 0;transform:scale(.5, 1) rotate(45deg);

Formes elliptiques partielles à l’aide d’un élément conteneur

Une autre façon d’obtenir des formes elliptiques partielles consiste à recourir à un élément conteneur (représenté ici en vert) dont la propriété overflow est fixée à hidden : vous ne faites ainsi apparaître qu’une partie de la forme qui y est contenue. Dans tous les cas, nous partons ici de la même forme contenue, dont les marges sont fixées à 0 : DIV.cercle {margin:0px;height:4rem;width:4rem;border-radius:2rem;} C’est sur l’élément conteneur que nous jouons : DIV.conteneur {height:2rem; width:4rem; overflow:hidden; } /* demi cercle */ DIV.conteneur {height:2rem; width:2rem; overflow:hidden; } /* quart de cercle */ Pour obtenir une orientation différentes, ou des secteurs à formes différentes, appliquez une transformation à l’élément conteneur : DIV.conteneur { …transform:rotate(45deg);} DIV.conteneur { transform:scale(.5, 1) rotate(45deg); }

Formes elliptiques partielles (avec élément conteneur).
Demi-cercleheight = width =aborder-radius: a/2;conteneur :height:a/2;width:a;overflow:hidden;	Quart de cercleheight = width = a;border-radius: a/2;conteneur : height=width= a/2;overflow:hidden;	Quart de cercle horizontalheight = width = a;border-radius: a/2;conteneur : height=width= a/2;overflow:hidden;transform:rotate(45deg);	Huitième de cercle horizontalheight = width = a;border-radius: a/2;conteneur : height=width= a/2;overflow:hidden;transform:scale(.5, 1) rotate(45deg);

Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque