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

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

Nicolas

Membre actif
Nicolas a soumis un nouveau tutoriel:

Créer un triangle / flèche sur un bloc - Créez un bloc de texte ou d'image avec une flèche de direction tout en CSS.

Bonjour à tous,

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,
Voir la pièce-jointe: 52

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

Voir le tutoriel complet...
 

Ziggy

Membre
Bonjour,

J'ai utilisé cette méthode pour mon site, comment faire pour appliquer une ombre au bloc entier ? SI je mets une ombre au cadre du texte la petite flèche n'est pas ombrée.

J'essaie d'appliquer une ombre au carré mais avec le changement d'angle ça ne rend pas bien, les 2 ombres (avec celle du bloc texte) ne sont pas synchronisées si je puis dire...
merci
 

Nicolas

Membre actif
Oui pas évident vu qu'il ne faut pas que l'ombre soit portée sous les bordures qui chevauchent le bloc.
Le truc est donc d'appliquer une valeur négative à l'axe horizontal de l'ombre, le deuxième attribut du box-shadow.

Par contre ça ne fonctionnera qu'avec des ombres qui n'ont pas une grande valeur "d'étalement" de l'ombre, le troisième attribut car cela débordera systématiquement sur les bords à cheval avec le bloc texte.

Donc voilà ce que j'ai pu faire pour le bloc Visiteurs en ligne:
ombre sur bloc texte : box-shadow: 1px 1px 3px rgb(200, 200, 200);
ombre sur triangle : box-shadow: 1px -1px 2px rgb(200, 200, 200);

et voilà le résultat :

Capture d’écran 2020-11-25 152655.png


Peut-être que cela pourrait te convenir. A+
 

Ziggy

Membre
Ok je vois, en fait je me prenais la tête avec l'ombre sous le triangle, je ne savais pas qu'on pouvait donner des valeurs négatives.
Est-ce que tous les blocs que l'on voit sur les sites utilisent cette technique ou bien il y en a d'autres ?

Le fait que ce soit 2 formes différentes complexifie la mise en forme par la suite je trouve. Bon ça reste malgré tout une bonne technique car cela peut faire l'affaire dans beaucoup de cas, comme dans le mien d'ailleurs. Merci Nicolas.
 

Eleven Up

Membre
Le fait que ce soit 2 formes différentes complexifie la mise en forme par la suite je trouve
Si ce n'est pas avec CSS alors ce sont des images.
C'est une façon courante pour avoir des formes complexes sur son site web.

Par contre il est probablement possible de fabriquer la forme bulle d'un seul bloc en CSS, mais là je n'ai pas la technique.
Je vais faire quelques tentatives sur Codepen et quelques tutos ;)
 

Jack

Membre
Disons que c'est tout de même plus rapide et facile comme ça ou avec l'importation d'image.
Fabriquer des formes complexes en CSS ok mais est-ce vraiment le but dans un site web ? C'est sûr que ça permet d'approfondir le CSS et de s'exercer (qui peut le plus peut le moins) mais pour un site en production je doute de l'utilité.

A+
 
Dernière modification par un modérateur:

Wazz9

Membre
Je trouve ça assez bien foutu le carré penché avec les bordures sur 2 côtés.
J'avoue ne jamais avoir pensé à former des formes avec plusieurs blocs, ça ouvre certaines perspectives. 2 carrés superposés dont l'un avec un angle de 45° nous donnerait une jolie étoile !

Merci pour le partage en tout cas.
 

Ces discussions pourraient vous intéresser...

  • Question
Hello, je cherche à indenter la première ligne de chaque paragraphe d'un long texte. Alors je me suis lancé dans du bricolage avec des margin-left sur des span mais au niveau html c'est pas très beau. <span class="retrait_20">Il</span><span>était une fois une princesse dans...
  • Question
Salut, Juste pour vous faire découvrir un site intéressant sur JavaScript via un jeu de mots croisés sur la thématique de ce langage. Vous pouvez vous y essayer à cette adresse: http://odyssey.sdlm.be/javascript/95/cross.htm
  • Résolue
Bonjour, Une question pour la mise à jour de Bootstrap quand une nouvelle version sort. Comment vous procédez ? J'utilise les CDN de bootstrap donc je me demandais ce que je devrais faire avant de les changer pour la nouvelle version ? Comment savoir ce qui va changer sur...
Haut