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 :

 

Une flèche en CSS

D’un point de vue purement géométrique, une flèche est composée d’un rectangle et d’un triangle.

triangle

Donc on va partir d’un simple bloc HTML qui nous servira à faire le rectangle, ensuite pour le triangle nous allons utiliser le pseudo élément after.

Code HTML de la flèche

<div class="fleche"></div>

Code CSS de la flèche

.fleche {
	position: relative;
	background: #88b7d5;
  height: 50px;
  width: 200px;
  margin-top: 50px;
}

.fleche:after {
  left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #88b7d5;
	border-width: 50px;
	margin-top: -50px;
}

Résultats flèche CSS

Voici un générateur de flèches bien pratique pour créer des blocs du type tooltips avec des flèches :

http://www.cssarrowplease.com/ 

To be continued….
Sources :

CSS-TRICKS