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.
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. | ||||
|---|---|---|---|---|
| Cercle height = width =a border-radius: a/2; |
Ellipse height : a; width: b; border-radius: c d c d; |
Patatoïde height : a; width : b; border-radius: c d e f; |
Ellipse horizontale I height : a; width : b; border-radius: a/2 transform:scaleX(1.5); |
Ellipse horizontale II height : a; width : b; border-radius: c d c d; transform:rotate(-45deg); |
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-cercle height = a/2 width =a border-radius: a/2 a/2 0 0; |
Quart de cercle height = width = a; border-radius: a 0 0 0; |
Pétale height = width = a; border-radius: 2a 0 2a 0; |
Quart de cercle horizontal height = width = a; border-radius: a 0 0 0; transform:rotate(45deg); |
Huitième de cercle horizontal height = width = a; border-radius: a 0 0 0; transform:scale(.5, 1) rotate(45deg); |
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-cercle height = width =a border-radius: a/2; conteneur :height:a/2;width:a; overflow:hidden; |
Quart de cercle height = width = a; border-radius: a/2; conteneur : height=width= a/2; overflow:hidden; |
Quart de cercle horizontal height = width = a; border-radius: a/2; conteneur : height=width= a/2; overflow:hidden; transform:rotate(45deg); |
Huitième de cercle horizontal height = width = a; border-radius: a/2; conteneur : height=width= a/2; overflow:hidden; transform:scale(.5, 1) rotate(45deg); |
|
|---|