Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 ⇒ & La géométrie avec CSS



La géométrie avec CSS

Grâce aux CSS et à la nouvelle norme CSS3, on peut  créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc.

Carré Rond
Ovale Triangles
L'étoile Le parallélogramme
Le trapèze Triangle et rond
Le losange

1-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.


.carre{
width: 200px;
height: 200px;
background-color: #FC7E2C;
}

Démo

Carré


2-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é.



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

Démo

Rond


3- 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.

la géométrie avec CSS 7astuces
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.
.ovale{
	width:300px;
	height:200px;
	background:#FF8000;
	-webkit-border-radius:150px / 100px;
	-moz-border-radius:150px / 100px;
	-o-border-radius:150px / 100px;
	border-radius:150px / 100px;
}

Démo

Ovale


4-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.

la géométrie avec CSS
.triangle{
	width:1px;
	height:1px;
	border:1px solid #069;
	border-color:transparent transparent #069 transparent;
	border-width:100px;
}
		

Démo


5-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é.

la géométrie avec CSS 7astuces

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).

 .etoile{
	margin: 100px auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #069;
	position: relative;
	background-color: #FFF;
}
.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;
}

Démo


6- le parallélogramme

Voici un rappel des principales fonctions de transformation :

  1. skew ;
  2. rotate ;
  3. 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 :

la géométrie avec CSS 7astuces
.parallelogramme{
	width:300px;
	height:100px;
	background:#069;
	-webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
}

Démo


7-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).

la géométrie avec CSS 7astuces
.trapeze{
	width:1px;
	height:100px;
	border:1px solid #069;
	border-color:transparent transparent transparent #069;
	border-width:100px;
}

Démo


8-Triangle et rond

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

la géométrie avec CSS 7astuces
 .rondTriangle{
	margin:50px auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #00238C;
	position: relative;
}
.rondTriangle:after{
	content: '';
	-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;
	background-color: #690;
}			

Démo

9-Le losange

Il s'agit de deux triangles juxtaposés.

la géométrie avec CSS 7astuces
.losange{
margin:50px auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #B100EC;
position: relative;
}
.losange:before{
content:'';
border: 1px solid #B100EC;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #B100EC;
width:0;
height:0;
position: absolute;
top:100px;
left:-50px;
}

Démo






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

Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces