ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

ENCADREMENTS A GEOMETRIE VARIABLE.

par André Marini 5 Mars 2015, 08:00 Texte

ENCADREMENTS A GEOMETRIE VARIABLE.

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

 

CODE 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

CODE DE BASE

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

 

CODE DE BASE

 

On peut, bien entendu, écrire ce que l'on veut à l'intérieur de ce cadre ou mettre des images.

commentaires

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog