Création de triangles uniquement en CSS

Blog du Freelance > Triangles en CSS

Triangles en CSS

la création de triangles en CSS, sans images

Posté le 06 août 2013 | Rangé dans Tutoriaux

Création de triangles uniquement en CSS

Le HTML comme le CSS ne nous permettent pas de faire des formes autre que le rectangle (je rappelle qu’un carré est un rectangle particulier). Seulement il est tout à fait possible de faire un triangle sans avoir besoin de créer une image à l’aide des bordures en CSS. La technique est simple : créer un bloc faisant 0 pixels de haut sur 0 pixels de large, et de jouer avec les bordures. On va devoir utiliser une bordure de couleur et des bordures transparentes, en utilisant la propriété CSS border-color :transparent; ! Comme la bordure en CSS est gérée par les navigateurs à l’extérieur du bloc et, lors d’une épaisseur importante, biaise les angles, nous allons pouvoir créer un triangle très simplement.

La technique est simple : la seule chose à retenir c’est que la bordure CSS pour la réalisation d’un triangle se fera toujours du coté opposé à la direction souhaitée. Du coup, si je souhaite faire un triangle pointant vers la droite, il faudra alors mettre une couleur de bordure à gauche. Idem pour les autres sens où l’on prendra toujours l’opposé.

Voici le code CSS à créer :

.flechedroite {
width : 0;
height : 0;
border-bottom : 5px solid transparent;
border-top : 5px solid transparent;
border-left : 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}

 

J’ai rajouté font-size et line-height à 0 afin d’éviter des incompatibilités sur différents navigateurs qui pourraient prendre en compte le fait qu’une div comporte un élément texte et fausse alors l’affichage de notre triangle CSS

Voyez, c’est tout simple !

A propos de l'auteur

jacques Danilo, blogueur et freelance

Jacques Danilo
www.pixelcrea.com

Graphiste indépendant depuis 11 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :

Contactez-moi

Sur le blog du freelance

Vendez vos produits e-commerce sur votre page pro Facebook
oui

Vendez plus facilement avec Facebook

Depuis 2015, Facebook propose pour les professionnels une visibilité de leur boutique e-commerce directement sur le numéro 1 des réseaux sociaux. Plutôt ...

Réaliser des campagnes de remarketing avec AdWords
oui

Le remarketing avec Google AdWords

    Le remarketing consiste à cibler des campagnes publicitaires pour des internautes ayant déjà visités le site Internet de l’entreprise (ou ...

Boostez votre ventes en optimisant votre tunnel d'achat
oui

Optimiser le tunnel d'achat

Lors d’un passage de commande sur votre site marchand, il est possible d’avoir des abandons de paniers tout au long de votre tunnel de commande (ou tunnel d’achat, ou ...

SEO : Vendez à l'aide des similar-items de Google Images
oui

Similar Items avec Google Images

A l'heure actuelle, cette fonctionnalité n'est disponible que sur les smartphones, tablettes et applications Google sur Android, mais devrait s'étendre dans les prochains mois ...

SEO : Améliorez son référencement local
oui

SEO local : les clefs du succès

Dans de nombreux cas, la zone de chalandise de votre entreprise s’étend sur quelques dizaines de kilomètres : que vous soyez une boulangerie, un coiffeur, un ...

Partagez cet article sur les réseaux sociaux

Les commentaires

Thom a commenté :

Avec les pseudo-elements aussi tu peux le faire

Jf studio a commenté :

C'est compatible toutes versions cette technique au moins ? Tu n'en parles pas... Ie6 et Ie7 ?

Elise WithDesigners a commenté :

Une technique intéressante que je ne connaissais pas, je suis sur qu’elle en intéressera plus d’un graphiste mais effectivement reste à voir si elle est utilisable sur toutes les versions.

cycy a commenté :

Je ne connaissais pas la technique, merci pour l'article. J'utilise d'habitude des caractères unicode pour obtenir des triangles : ◄ ►

Laissez un commentaire








* Champs obligatoires

» Retour au blog du freelance