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

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

Niveau
  1. 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,
Capture d’écran 2020-11-24 143051.png


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.
Auteur
Nicolas
Affichages
178
Publication
Mise à jour
Notation
4.50 étoiles(s) 2 note(s)

Évaluations récentes

Une bonne idée pour créer certaines formes en HTML et CSS. Avec quelques notions, et des tutos, on peut s'amuser.
Merci pour le partage, pas mal l'astuce pour créer un triangle en penchant un carré ! Bravo.
Haut