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 12 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

Découverte de l'administration de Wordpress
oui

L'administration de Wordpress

Dans ce tutoriel destiné aux débutants, je vais vous présenter l’interface d’administration de Wordpress. Il s’agit ici d’une découverte ...

Optimisez le SEO de vos fiches produits sur Prestashop 1.7
oui

Fiches produits : le SEO dans Prestashop 1.7

Mettez toutes les chances de votre coté en adoptant les bons réflexes SEO lorsque vous ajoutez un produit sur Prestashop 1.7. Etape par étape, nous allons ...

16 moyens d'obtenir des backlinks pour 2018
oui

SEO : 16 techniques pour vos backlinks pour 2018

Le référencement naturel (optimisation SEO) va de pair avec l’obtention de backlinks. Il s’agit de liens pointant vers une page de notre site Internet. C’est ...

Comment bien référencer vos images sur votre site Internet ?
oui

Les images et le SEO

Les images ont une place importante dans la stratégie SEO de votre entreprise : elles permettent de gagner en visibilité grâce à Google Images et de gagner ...

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 ...

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