Créer des triangles en CSS

Bienvenue dans ce tutoriel, où vous apprendrez une nouvelle technique pour créer des triangles en pure CSS ! Sans utiliser d’images, et c’est compatible CSS2 ! Vous pouvez ajuster chaque angle, et direction du triangle. Nous allons utiliser l’attribut CSS, border.

Démonstration

Comment ça marche ?

Nous allons utiliser un bloque avec une largeur et une hauteur égale à zéro (on veut un triangle et non un trapèze !), puis, nous allons donner une large bordure à ce bloque, en utilisant une couleur pour chaque coté (en conséquent, pour avoir qu’un coté, il faut mettre les autre en transparent) !
Comme vous vous imaginez, le bloque sera divisé en 4 triangles !

Example concret

<div class="triangles-multicolor"></div>

.triangles-multicolor { border-color: red green blue orange; border-style:solid; border-width:20px; width:0; height:0;}

Ce qui va nous donner :

Modifier la forme

En modifiant border-width, vous allez donner une taille différente à chaque triangle !

Exemple :

.css-arrow-acute { border-color: red green blue orange; border-style:solid; border-width:25px 10px 15px 30px; width:0; height:0;}

Ce qui nous donne :

Autres formes

En modifiant border-style, on change le style des triangles.

Exemples :

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

Et voilà, l’article est terminé, vous venez d’apprendre une nouvelle technique en CSS ! A plus pour d’autres tutoriels

css Triangle webdesign