Ovale et forme elliptique avec CSS3 sans image

La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS 3. Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée.

Une utilisation plus poussée

La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. Voici comment pourrait se présenter un de ces codes :

.arrondi {
    width: 120px;
    height: 50px;
    border: 2px solid #000;
    -webkit-border-radius: 12px / 24px;
    -moz-border-radius:    12px / 24px; 
    border-radius:         12px / 24px; 
}

Les deux valeurs utilisées représentent l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde. Vous pouvez ainsi styliser vos angles arrondis en les écrasant un peu.

Comme vous pouvez le constater, l'utilisation d'un slash entre les deux valeurs est indispensable pour un souci de compatibilité entre les navigateurs. En effet en cas d'oubli de ce petit élément, nous avions une différence d'interprétation entre Firefox et Chrome. Cette erreur qui provenait de Chrome semble avoir été corrigée sur la dernière version du navigateur, mais autant prendre de bonnes habitudes de votre côté.

Mais encore... ?

En poussant le vice un peu plus loin on peut facilement imaginer construire un ovale. La construction d'un ovale respecte une règle assez simple que l'on pourrait résumer ainsi :

Les dimensions des arrondis d'un ovale sont de moitié égales à celles du rectangle qui le contient.

Certains seront peut-être plus éclairés avec des chiffres, voici donc un exemple :

.ovale {
    width: 200px;
    height: 320px;
    background: #9a4;
    -webkit-border-radius: 100px / 160px;
    -moz-border-radius:    100px / 160px; 
    border-radius:         100px / 160px; 
}

Nous avons ici une classe appliquée à un bloc qui va prendre comme valeurs 200px de largeur et 320px de hauteur. Nos arrondis prennent en valeurs 100px (soit la moitié de 200... si si promis) sur l'horizontale et 160px sur la verticale.

Vous aurez donc compris que le rond (ou cercle) est désormais facilement réalisable en CSS3. Cependant en terme de contenu textuel, n'espérez pas y mettre grand chose, ça se limitera, je pense, à une utilisation graphique (design). Est-il utile de vous rappeler que cette utilisation du CSS permettra un affichage correct uniquement sur les derniers navigateurs ? Il faut compter sur un support de Internet Explorer uniquement à partir de la version 9.

Allons plus loin

La valeur de la propriété border-radius peut être précisée pour réaliser une modification des angles au cas par cas :

.arrondi {
    width: 120px;
    height: 50px;
    border: 2px solid #000;
    -webkit-border-radius: 
               10px 75px 10px 10px / 10px 30px 10px 10px; 
    -moz-border-radius:
               10px 75px 10px 10px / 10px 30px 10px 10px; 
    border-radius:
               10px 75px 10px 10px / 10px 30px 10px 10px; 
}

Le principe reste le même que d'habitude dans l'ordre de déclaration des valeurs, nous partons de l'angle haut gauche pour finir à l'angle bas gauche en faisant le tour de la boîte. Tout ce qui se trouve à gauche du séparateur de valeurs (le slash) traite les dimensions horizontales des arrondis, ce qui se trouve à droite traite les dimensions verticales. Nous avons donc ce schéma :

Cette propriété offre donc de nouvelles possibilités, combinée avec les propriétés de transformation et de transition (entre autres) vos styles prendrons une nouvelle dimension.