triangle avec CSS

Comment faire un triangle avec CSS ?

Temps de lecture: 2 minutes

Hello la #davidnation,

J’écris cet article pour aider certains d’entre vous, qui ont des problèmes à faire ceci 👇

En gros, comment faire le triangle des matheux en CSS ? Important à savoir surtout si on veut faire des sortes de p’tites flèches haut, bas , gauche ou droite sur notre page web.

Commençons par le HTML. Créons 4 div qui vont concerner chacune de ces flèches (haut, bas, gauche et droite)

Vous pouvez les faire avec une seule div. C’est bien d’avoir des cours pour chaque possibilité.

HTML

 

CSS

L’idée est une boîte avec zéro largeur et hauteur. La largeur et la hauteur réelles de la flèche sont déterminées par la largeur de la bordure.

  • Dans une flèche vers le haut, par exemple, la bordure inférieure est colorée, tandis que les côtés gauche et droit sont transparents, ce qui forme le triangle.
  • Dans une flèche vers le bas, la bordure supérieure est colorée, tandis que les côtés gauche et droit sont transparents, ce qui forme le triangle.
  • Dans une flèche vers la droite, la bordure de gauche est colorée, tandis que les côtés haut et bas sont transparents, ce qui forme le triangle.
  • Dans une flèche vers la gauche, la bordure de droite est colorée, tandis que les côtés haut et bas sont transparents, ce qui forme le triangle.

En essayant ce code, voici ce que vous obtiendrez:

Et voilà, j’espère que ça vous aidera. Pour découvrir plus de tutos sur HTML et CSS, n’hésitez pas à consulter cette page.

  • Merci d’avoir lu ! 🙂 Si vous avez aimé cet article,
  • Faites un coucou sur : Instagram | Facebook | Twitter |
  • Avez-vous besoin d’aide pour votre projet web ? Ecrivez moi à l’adresse suivante : david@oschool.ci

 

Deviens toi aussi développeur web !
I agree to have my personal information transfered to MailChimp ( more information )
Commences ta carrière de développeur web, GRATUITEMENT, ici et maintenant !
Je hais les sapms. Votre adresse email ne sera jamais vendu ou partagé avec un tiers
Partages à tous tes amis !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.