De la géométrie avec CSS

Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive).

Tous les exemples auront pour structure HTML cette base :

 
Sélectionnez

<div class="nom_de_la_forme">
</div>
		

Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.
Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius).

5 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Le carré

Ici, rien de bien compliqué, il suffit de définir une largeur et une hauteur identiques pour chaque côté de notre élément HTML.

Image non disponible
 
Sélectionnez

.carre{
	width:200px;
	height:200px;
	background:#069;
}
			

II. Le rectangle

Le principe est le même que le carré sauf que la largeur est plus grande que la hauteur (ou l'inverse selon l'effet désiré).

Image non disponible
 
Sélectionnez

.rectangle{
	width:400px;
	height:200px;
	background:#069;
}
			

III. Le rond

Le rond est obtenu grâce à la propriété border-radius sur un élément carré. La valeur du border-radius sera égale à la moitié de la valeur d'un côté.

Image non disponible
 
Sélectionnez

.rond{
	width:200px;
	height:200px;
	background:#069;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
}
			

IV. L'ovale

J'ai appris récemment que l'on pouvait donner deux valeurs au border-radius équivalant à l'arrondi de départ et l'arrondi d'arrivée d'un coin de bordure.

Par exemple :

Image non disponible
 
Sélectionnez

border-top-left-radius : 150px 100px;
			

Le code ci-dessus va donner pour la bordure haut et droite, un arrondi commençant à 100px en radius sur le left pour arriver à 150px en radius sur le top.

Image non disponible

Ainsi en appliquant ce procédé à toutes les bordures, on arrive à une forme ovale. Il faudra le faire sur un bloc ayant une forme rectangle.

 
Sélectionnez

.ovale{
	width:300px;
	height:200px;
	background:#069;
	-webkit-border-radius:150px / 100px;
	-moz-border-radius:150px / 100px;
	-o-border-radius:150px / 100px;
	border-radius:150px / 100px;
}
			

équivaut à :

 
Sélectionnez

.ovale {
	width: 300px;
	height: 200px;
	background: #069;
	border-top-left-radius: 150px 100px;
	border-top-right-radius: 150px 100px;
	border-bottom-right-radius: 150px 100px;
	border-bottom-left-radius: 150px 100px;
}
			

V. Les triangles

Le principe du triangle est simple car il équivaut à manipuler la largeur des bordures ainsi que leur visibilité - par le biais de la couleur de la bordure - sur un élément HTML ayant des dimensions égales à 1px.

Image non disponible
 
Sélectionnez

.triangle{
	width:1px;
	height:1px;
	border:1px solid #069;
	border-color:transparent transparent #069 transparent;
	border-width:100px;
}
			

Pour avoir un triangle orienté vers un autre côté, il suffit juste de changer les valeurs de border-color.

VI. La transformation au service de la géométrie : le parallélogramme

Dans mon article précédent, je parlais des propriétés transform introduites en CSS3. Celles-ci nous permettent de modifier la forme de nos éléments (dans un plan 2D).

Voici un rappel des principales fonctions de transformation :

  • skew ;
  • rotate ;
  • translate.

La fonction qui va nous intéresser sera la fonction skew. On part de la base d'un rectangle auquel on applique la transformation :

Image non disponible
 
Sélectionnez

.parallelogramme{
	width:300px;
	height:100px;
	background:#069;
	-webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
}
			

VII. Le trapèze

Un trapèze se fait sur la même base que le triangle mais au lieu d'avoir une hauteur ou une largeur à 1px, on a un des deux côtés à 1px et l'autre ayant une valeur supérieure à 1px (100px par exemple).

Image non disponible
 
Sélectionnez

.trapeze{
	width:1px;
	height:100px;
	border:1px solid #069;
	border-color:transparent transparent transparent #069;
	border-width:100px;
}
			

VIII. Les autres formes : la magie des pseudoéléments :after et :before

Jusque-là, on a vu la puissance du CSS/CSS3 pour produire de la géométrie. Grâce aux pseudoéléments :after et :before (ou ::after et ::before), on peut concevoir des formes beaucoup plus complexes.

Dans le tutoriel d'Alen Grakalic (tags pour vos billets blogs en css3 pure), on voit un peu ce que l'on peut obtenir grâce à ces pseudoéléments. Voyons ce que l'on peut en faire.

IX. L'étoile

L'astuce est assez simple, car il suffit juste de créer un triangle. Puis grâce au pseudoélément :after, on refait un triangle mais dans le sens opposé.

Image non disponible

Une fois ces deux triangles créés, il suffit de positionner le triangle créé en :after afin de le superposer au deuxième triangle (via la propriété position de valeur absolute).

Image non disponible
 
Sélectionnez

.etoile{
	background:#000;
	margin:100px auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #069;
	position: relative;
}
.etoile:after{
	content:'';
	border: 1px solid #069;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #069;
	width:0;
	height:0;
	position: absolute;
	top:30px;
	left:-50px;
}
			

X. Triangle et rond

C'est le même principe que pour l'étoile.

Image non disponible
 
Sélectionnez

.rondTriangle{
	margin:100px auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #000;
	position: relative;
}
.rondTriangle:after{
	content:'';
	background:#069;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	border-radius:50px;
	width:75px;
	height:75px;
	position: absolute;
	top:30px;
	left:-37px;
}			
			

XI. Le losange

Il s'agit de deux triangles juxtaposés.

Image non disponible
 
Sélectionnez

.losange{
	margin:100px auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #069;
	position: relative;
}
.losange:before{
	content:'';
	border: 1px solid #069;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #069;
	width:0;
	height:0;
	position: absolute;
	top:100px;
	left:-50px;
}
			

On aurait pu faire ce losange en passant par un carré avec deux fonctions de transformation : skew et rotate.

XII. Conclusion

A partir de là, on peut imaginer plein de possibilités de formes grâce aux nouvelles propriétés CSS3 et aux pseudoéléments.

XIII. Remerciements

Un grand merci à ClaudeLELOUP pour sa relecture attentive et ses conseils.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2011 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.