3.8 KiB

Raw Blame History

Projet Swish

Etudes des formes

Avec C.TOFFIN, Y.SEVRET, A.GOLFIER, T.SOUCHON et Monsieur LAFOURCADE EN 2A de DUT Info.

SOMMAIRE

Explications
Etude du cercle
Etude du carré
Etude du triangle
Etude du losange
Etude du pentagone

Explications

Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de longueur X qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.

La division étant définie par :

#containform {
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}

Etude du cercle

Cette structure contient deux formes :

Un anneau (composé de 2 ronds) qui représente la partie extérieur
Un rond qui représente la partie intérieur manquante

En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :

<div class="rond"></div>

Et en CSS nous définissons

.rond {
    //centrer la division
    display: table;
    margin: 0 auto;
    //définir la couleur
    background-color: #FFD100;
    //définir la taille
    height: 3vw;
    width: 3vw;
    //définir un arondie à notre div
    border-radius: 3vw;
}

Version 1

Notre objectif étant de réaliser la figure suivante :

Code forme anneau :

:root{
	/*Valeur à changer en fonction*/
  --x : 6vw;
  --d : calc(var(--x_longueur)/2);
  --e : calc(var(--x_longueur)/4);
}

.anneau {
    background-color: #FFD100;
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    /*Centrer les éléments intérieurs verticalement*/
    display: table-cell;
    vertical-align: middle;
}
.rondinterieur {
    background-color: white;
    height: var(--d);
    width: var(--d);
    /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Faire un arondie*/
    border-radius: var(--d);
}
.rond {
   /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Définir la couleur*/
    background-color: #FFD100;
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}

Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.

Version 2

Notre objectif étant de réaliser la figure suivante :

Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus. Code HTML :

<div class="containform2">
		<div class="rond2"></div>
</div>

Code CSS :

.containform2{
	height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
    background-color: #FFD100;
}

.rond2 {
	display: table;
    margin: 0 auto;
    background-color: white;
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}

Version 3

Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :

Il faut alors coder la forme de gauche

<div class="containform2">
  <div class="anneau2"></div>
</div>