Les formes géométriques - Le laboratoire

Créer des formes géométriques qu'en Css

Vous trouverez dans cette partie divers codes Css, pour faire des formes géométriques diverses.

Comment créer un polygone à quatre côtés en Css?

Quelques exemples de polygones créés grâce aux feuilles de styles Css

Exemple de polygones en Css :

Ce que vous devez voir :
"Exemple de polygones en Css"

Les codes Css pour créer des polygones

Une seule condition pour les codes qui suivent fonctionnent, il faut que l'élément soit de type "block" ou "inline-block".

Pour faire un carré en Css, il faut utiliser les propriétés Css height et width.

Code pour créer un carré en Css :

#carre {
  width  : 50px;
  height : 50px;
  background : green;
}

Pour faire un rectangle en Css, il faut utiliser les propriétés Css height et width.

Code pour créer un rectangle en Css :

#rectangle {
  width  : 100px;
  height : 50px;
  background : green;
}

Pour faire un losange et parallélogramme en Css, nous utilisons en réalité deux triangles que nous assemblons. Le premier est crée dans l'élément même, le second est créé avec ajout de contenu en :after ou :before, puis repositionné avec position, left et top.
Il est possible de faire un losange en Css avec les transformations 2D, en utilisant la fonction Css rotate() et skew(). Cependant, la version proposée ci-dessous reste la plus compatible.

Code pour créer un losange en Css :

#losange {
  width  : 0;
  height : 0;
  border : 25px solid transparent;
  border-bottom : 35px solid green;
  position : relative;
  top : -25px;
}
#losange:after {
  width  : 0;
  height : 0;
  content : '';
  position : absolute;
  left : -50px;
  top  : 35px;
  border : 25px solid transparent;
  border-top : 35px solid green;
}

Code pour créer un losange à angles droits en Css :

#losange-90{
  width  : 0;
  height : 0;
  position : relative;
  top : -25px;
  border : 25px solid transparent;
  border-bottom-color : green;
}
#losange-90:after {
  width  : 0;
  height : 0;
  content : '';
  position : absolute;
  left : -25px;
  top  : 25px;
  border : 25px solid transparent;
  border-top-color : green; 
}

Code pour créer un parallélogramme en Css :

#parallelogramme {
  width  : 100px;
  height : 0;
  border-top  : 50px solid green;
  border-left : 20px solid transparent;
  position : relative;
}
#parallelogramme:after {
  width  : 0;
  height : 0;
  content: '';
  border-bottom : 50px solid green;
  border-right  : 20px solid transparent;
  border-left   : 20px solid transparent;
  position : absolute;
  top  : -50px;
  right: -20px;
}

Pour faire un trapèze en Css, nous utilisons le concept des triangles.

Code pour créer un trapèze en Css :

#trapeze{
  border-bottom: 50px solid green;
  border-left  : 25px solid transparent; 
  border-right : 25px solid transparent;
  height : 0;
  width  : 50px;
}

Comment créer un triangle en Css?

Le principe de base de la création de triangles

Le concept de la création du triangle en CSS est basé sur les bordures (border). L'intersection entre chaque bordure forme, un angle. En jouant sur l'épaisseur des bordures, l'angle varie. Une fois les bons angles trouvés, il ne vous reste plus qu'à supprimer la bordure inutile, mettre en transparence les deux bordures qui forment les angles (border-color) et de ne garder que les bordures, en mettant height et width à 0.

Tester en direct la création de triangle en Css

Exemple :

Ce que vous devez voir :
"Etapes de création de triangle en css"

Etape du code comprendre le concept du triangle en Css :

.triangle{
  border-style : solid;
  border-color : darkslateblue pink green red;
  border-width : 20px 40px 20px  20px ; 
  background   : #ccc;  
  width  : 20px;
  height : 20px;
}

/* Suppression de la bordure inutile  */
.triangle{
  border-style : solid;
  border-color : darkslateblue pink green red;
  border-width : 0 40px 20px  20px ;  /* top à 0 */
  background   : #ccc;  
  width  : 20px;
  height : 20px;
}

/* modification des couleurs */
.triangle{
  border-style : solid;
  border-color : transparent transparent green transparent; /* transparence */
  border-width : 0 40px 20px  20px; 
  background   : none; /* suppression de l'arrière plan */
  width  : 20px;
  height : 20px;
}

/* Suppression de la taille de l'élément */
.triangle{
  border-style : solid;
  border-color : transparent transparent green transparent;
  border-width : 0 40px 20px  20px; 
  background   : none;  
  width  : 0; /* 0 */
  height : 0; /* 0 */
}

Pour faire une bordure au triangle, il faut superposer 2 triangles, dont un est plus petit que l'autre.
Utiliser :before ou :after. Dans l'exemple qui suit, j'ai agrandi le triangle un peu au "pif", Pour bien faire il faut faire un calcul, mais là je ne l'ai pas en tête.

Code pour créer une bordure à un triangle en Css :

#triangle-bordure {
  width : 0;
  height : 0;
  border-left : 28px solid transparent;
  border-right : 28px solid transparent;
  border-bottom : 54px solid #000;
  position : relative;
}
#triangle-bordure:before{
  content: '';
  width : 0;
  height : 0;
  position : absolute;
  border-left : 25px solid transparent;
  border-right : 25px solid transparent;
  border-bottom : 50px solid green;
  top:3px;
  left:-25px;
}

Quelques exemples de triangles créés grâce aux feuilles de styles Css

Exemple de triangles en Css :

Ce que vous devez voir :
"Exemple de triangles en Css"

Les codes Css pour créer des triangles

Une seule condition pour les codes qui suivent fonctionnent, il faut que l'élément soit de type "block" ou "inline-block". Certains codes Css de triangles peuvent être simplifiés, mais pour plus de clarté je décompose au maximum.

Pour faire un triangle équilatéral, il faut que :

Exemple de code :

(border-left-width + border-right-width) * 0.866 = border-bottom-width

Code pour créer un triangle pointe vers le haut en Css :

#triangle-top {
  width  : 0;
  height : 0;
  border-left   : 25px solid transparent;
  border-right  : 25px solid transparent;
  border-bottom : 50px solid green;
}

Code pour créer un triangle pointe vers le bas en Css :

#triangle-bottom {
  width  : 0;
  height : 0;
  border-left  : 25px solid transparent;
  border-right : 25px solid transparent;
  border-top   : 50px solid green;
}

Code pour créer un triangle pointe vers la gauche en Css :

#triangle-left{
  width  : 0;
  height : 0;
  border-top    : 25px solid transparent;
  border-bottom : 25px solid transparent;
  border-right  : 50px solid green;
}

Code pour créer un triangle pointe vers la gauche en Css :

#triangle-right{
  width  : 0;
  height : 0;
  border-top    : 25px solid transparent;
  border-bottom : 25px solid transparent;
  border-left   : 50px solid red; 
}

Code pour créer un triangle pointe vers la droite et en haut en Css :

#triangle-topleft {
  width  : 0;
  height : 0;
  border-top   : 50px solid green;
  border-right : 50px solid transparent;
}

Code pour créer un triangle pointe vers la gauche et en haut en Css :

#triangle-topright {
  width  : 0;
  height : 0;
  border-top  : 50px solid green;
  border-left : 50px solid transparent;
}

Code pour créer un triangle pointe vers la droite et en bas en Css :

#triangle-bottomleft {
  width  : 0;
  height : 0;
  border-bottom : 50px solid green;
  border-right  : 50px solid transparent;
}

Code pour créer un triangle pointe vers la gauche et en bas en Css :

#triangle-bottomright {
  width  : 0;
  height : 0;
  border-bottom : 50px solid green;
  border-left   : 50px solid transparent;
}

Comment créer une forme circulaire en Css

Quelques exemples de formes circulaires créées grâce aux feuilles de styles Css

Exemple de formes circulaire en Css :

Ce que vous devez voir :
"Exemple de forme circulaire en Css"

Les codes Css pour créer des formes circulaires

Une seule condition pour les codes qui suivent fonctionnent, il faut que l'élément soit de type "block" ou "inline-block".
Les formes circulaires s'appuient sur la propriété Css border-radius.
Vous trouverez un générateur de coins arrondis pour faire des tests.

Code pour créer un cercle en Css :

#cercle{
  width : 50px;
  height : 50px;
  background : green;
  -moz-border-radius : 25px;
  -webkit-border-radius : 25px;
  border-radius : 25px;  /* ou 50% */
}

Code pour créer un ovale en Css :

#ovale{
  width : 100px;
  height : 50px;
  background : green;
  -moz-border-radius : 50px / 25px;
  -webkit-border-radius : 50px / 25px;
  border-radius : 50px / 25px;
}

Comment créer un hexogone en Css ?

Les codes Css pour créer des hexagones

Pour faire un hexagone Css, il est nécessaire de faire quelques calculs, je vous invite donc à utiliser le générateur de code Css pour hexagone.

Générateur d'hexagone Css

Code HTML pour créer un hexagone :

<div class="hexagone"></div>

Code CSS pour créer un hexagone :

.hexagone {
  box-sizing : border-box;
  position : relative;
  width : 121.24356px;
  height : 70px;
  background-color : #008000;
  margin : 35px 0;
}
.hexagone:before,
.hexagone:after {
content : "";
  box-sizing : border-box;
  position : absolute;
  width : 0;
  border-left : 60.62178px solid transparent;
  border-right : 60.62178px solid transparent;
}
.hexagone:after {
  top : 100%;
  width : 0;
  border-top : 35px solid #008000;
}
.hexagone:before {
  bottom : 100%;
  border-bottom : 35px solid #008000;
}

Exemple de formes hexagonales en Css :

Ce que vous devez voir :
"Exemple de forme hexagonale en Css"

Définitions annexes

Définitions CSS annexes

:after: Le pseudo-élément CSS :AFTER de spécifier qu'un "contenu CSS" sera inséré à la fin du contenu d'un élément (x)HTML ou d'assigner à ce "contenu CSS" de...[ :after ]
:before: Le pseudo-élément CSS :BEFORE permet de spécifier qu'un "contenu CSS" sera inséré avant le contenu d'un élément (X)HTML et d'assigner à ce "contenu CS...[ :before ]
border: La propriété de bordure CSS BORDER est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bord...[ border ]
border-color: La propriété de Couleur de Bordure CSS BORDER-COLOR est un raccourci qui permet de spécifier la couleur des quatre bordures Css d'un élément (X)HTML, ...[ border-color ]
border-radius: La propriété de coin arrondi CSS BORDER-RADIUS est un raccourci qui permet de spécifier la courbe de l'arrondi Css des coins d'un élément (X)HTML, mai...[ border-radius ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
left: La propriété de Position CSS LEFT permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son...[ left ]
position: La propriété de Position CSS POSITION permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnem...[ position ]
rotate(): La fonction de Rotation CSS ROTATE() de la propriété de Transformation CSS transform permet de spécifier la rotation à effectuer sur un élément HTML. ...[ rotate() ]
skew(): La fonction d'Inclinaison CSS SKEW() de la propriété de Transformation CSS transform permet d'incliner horizontalement et/ou d'incliner verticalement ...[ skew() ]
top: La propriété de Position CSS TOP permet de spécifier la position du bord haut de la marge d'un élément positionné par rapport au bord haut de son pare...[ top ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]