Comment créer une queue d'info-bulle avec Pure CSS ?

Création d'une "queue d'info-bulle" avec du CSS pur

L'effet "queue d'info-bulle" fait référence à un élément visuel souvent utilisé dans la conception Web pour indiquer des informations ou un contexte supplémentaires. Il apparaît généralement sous la forme d'un petit triangle ou d'une flèche pointant de l'élément principal de l'info-bulle vers l'élément cible.

Comment fonctionne l'effet

L'astuce CSS originale utilise la bordure CSS propriété pour créer la forme de la queue. En définissant le style, la largeur et la couleur de la bordure en conséquence, vous pouvez obtenir l'effet triangulaire souhaité. Par exemple :

.tooltiptail {
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}

Extension de l'effet

Pour créer l'effet de queue plus élaboré présenté dans la question, vous pouvez exploiter les ombres CSS et des éléments de bordure supplémentaires.

<div>

#tailShadow {
    box-shadow: 0 0 10px 1px #555;
}

#tail1 {
    border-color: #a0c7ff transparent transparent transparent;
    border-width: 10px;
}

#tail2 {
    border-color: #f9f9f9 transparent transparent transparent;
    border-width: 10px;
}

Compatibilité entre navigateurs pour les ombres

Bien que la propriété CSS box-shadow soit largement prise en charge dans les navigateurs modernes, il est important de noter qu'elle peut ne s'affiche pas de manière cohérente sur tous les navigateurs. Pour une compatibilité accrue, envisagez d'utiliser une combinaison d'ombres CSS et de dégradés d'arrière-plan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!