Voici comment faire des encadrements à géométrie variable, en partant d'un rectangle ou d'un carré et en modifiant les angles droits.
Comme chaque angle peut être modifié indépendamment des autres, on peut arriver à des figures de toute forme.
CODE DE BASE.
<div style="width:450px; height:200px; border-radius:0px 0px 0px 0px; border:solid 1px black;
text-align:center; line-height:200px;">
CODE DE BASE
</div>
RESULTAT DE BASE
Mais comme on peut le remarquer, il y a 4 valeurs border-radius, ici égales à 0.
Ces valeurs déterminent le rayon de chaque angle si on veut l'arrondir.
La première concerne l'angle supérieur gauche.
La deuxième concerne l'angle supérieur droit.
La troisième concerne l'angle inférieur gauche.
La quatrième concerne l'angle inférieur droit.
Je vais modifier mon code ainsi:
border-radius:0px 0px 0px 0px;
devient
border-radius:30px 60px 80px 180px;
CODE
<div style="width:450px; height:200px; border-radius:30px 60px 80px 180px; border:solid 1px black;
text-align:center; line-height:200px;">
<strong>CODE DE BASE</strong>
</div>
RESULTAT
Une valeur border-radius ne peut pas être supérieure à 180 px puisqu'un cercle entier fait 360 px.
CODE AVEC 4 FOIS 180px
CODE
<div style="width:450px; height:200px; border-radius:180px 180px 180px 180px; border:solid 1px black;
text-align:center; line-height:200px;">
<strong>CODE DE BASE</strong>
</div>
RESULTAT
On peut, bien entendu, écrire ce que l'on veut à l'intérieur de ce cadre ou mettre des images.
Haut de page
commentaires