formes-css

Créer des Formes en CSS pur

Avec les nouvelles propriétés CSS et l’arrivée des pseudo-éléments, il est désormais plus facile de créer des formes en CSS.

Cet article sera régulièrement remis à jour au grès de mes envies. Bonne lecture.

Un carré en CSS

C’est le plus facile : Un bloc, une largeur, une hauteur identique à la largeur et le tour est joué.

Code HTML du carré

<div class="carre"></div>

Code CSS du carré

.carre {
 width:100px;
 height:100px;
 background:blue;
 margin:10px auto;
}

Résultats carré CSS

Un rond en CSS

On part d’une base carré, et on ajoute une propriété CSS border-radius

Code HTML du rond

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

Code CSS du rond

.rond {
 width:100px;
 height:100px;
 border-radius:50%;
 background:purple;
 margin:10px auto;
}

Résultats rond CSS

Un triangle en CSS

Pour faire un triangle en CSS, il faut jouer avec les bordures

Code HTML du triangle

<div class="triangle"></div>

Code CSS du triangle

.triangle {
 width:0px;
 height:0px;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
 margin:10px auto;
}

Résultats triangle CSS
En fonction de l’orientation que vous voulez donner à votre triangle, il faut changer les valeurs des attributs border-left, border-right, border-top, border-bottom.
Consulter le fiddle suivant pour avoir les différents exemples :

 

To be continued….

 

Sources :

CSS-TRICKS