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

[Nicolas]

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

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

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]

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 :

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

 

[Ziggy]

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]

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]

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+

 

[Wazz9]

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.

 

[Ziggy]

Ouais c'est pas faux Jack, le mieux étant l'ennemi du bien, autant ne pas trop compliquer les choses