Créer un triangle en css pour ses listes

Comment créer un triangle en css

Voici un petit mémo et des bouts de code pour créer un triangle en css. C’est notamment utile pour des listes :

Pour créer un triangle on peut utiliser le code suivant (tiré du site grafykart)

* Pour faire un triangle vers la droite */
.triangle{
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000000;
}

Ajouter une image en background sur ses listes avec les pseudos élements

Pour appliquer cet effet à une liste, il faut l’appliquer sur un pseudo élement:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

Voici le rendu:

See the Pen triangles en css by yuyazz (@yuyazz) on CodePen.

Ajouter une image en background sur ses listes

Pour de l’intégration à partir d’un PSD, normalement on a l’image de la flèche, Dans ce cas, on la place en background des li, et on joue sur son positionnement pour le placer:

See the Pen ul li with arrow by yuyazz (@yuyazz) on CodePen.

Ajouter une image en background avec list-style-image

Un dernier exemple, valide w3c, ici on utilise list-style-image pour l’arrière plan des li, et « Pour se prémunir d’une absence d’affichage en cas d’indisponibilité de l’image, le type de puce doit être indiqué en plus de la déclaration de l’image. »

See the Pen list-style-image by yuyazz (@yuyazz) on CodePen.

Pour parvenir à un résultat rapidement, on peut toujours utiliser un générateur de triangle comme celui-ci !