tutoriel - Créer un triangle / flèche sur un bloc

Niveau

Débutant

Tuto HTML - CSS

Je partage avec vous une petit truc CSS pour créer un bloc avec une flèche de direction, qui peut servir également de bulle, comme en bande dessinée.

Je l'ai créé pour le bloc des visiteurs en ligne,

Voici les codes HTML et CSS pour la création de ce bloc

HTML

<div class="visitor">
    Visiteurs en ligne (4)
</div>
<div class="arrow-right"></div>

Pour créer le petit triangle qui sert de flèche il y a une petite astuce toute simple, on crée un carré puis avec CSS on le penche à 45° et on le positionne à cheval du bloc, dans ce cas le bloc 'visitor'.

CSS

.visitor {
    background: rgb(254, 254, 254);
    border: 1px solid rgb(220, 220, 220);
    padding: 10px;
}

.arrow-right {
    width: 12px;
    height: 12px;
    background: rgb(254, 254, 254);
    border-top: 1px solid rgb(220, 220, 220); /* bordure haute */
    border-right: 1px solid rgb(220, 220, 220); /* bordure droite */
    transform: rotate(45deg); /* rotation horaire de 45° */
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -khtml-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    position: relative; /* on positionne le bloc à cheval sur le bloc 'visitor' */
    top: 15px;
    right: 6px;
}

Et voilà ! Le tour est joué. Le carré est positionné au dessus du bloc 'visitor' mais les bordures basse et gauche n'étant pas définies et le background étant le même cette partie du carré se fond dans le bloc.

Pour positionner la flèche à droite du bloc jouez avec top et right, pour positionner la flèche en haut ou en bas du bloc, il faut rajouter un élément flex dans une div principale.

N'hésitez pas à commenter ce petit tutoriel dans la discussion.

tutoriel Créer un triangle / flèche sur un bloc

Partager cette ressource

Évaluations récentes