Comment puis-je créer un effet « Tooltip Tail » avec Pure CSS ?

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

Le concept de création d'une "queue d'info-bulle" en utilisant uniquement CSS est fascinant. Voici comment obtenir cet effet :

"Tooltip Tail" de base avec Border Trick

Le premier exemple crée un effet "tooltip tail" en utilisant une manipulation intelligente des bordures :

HTML :

<div>Cool Trick:
    <div class="tooltiptail"></div>
</div>
<br>

<div>How do I get this effect with only CSS?
    <div class="anothertail"></div>
</div>

CSS :

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

.anothertail {
    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
    display: block;
    height: 29px;
    width: 30px;

}

« Queue d'info-bulle » améliorée avec boîte Ombre

Pour ajouter de la dimension et une ombre à la pointe de la « queue d'info-bulle », vous pouvez utiliser une ombre de boîte :

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    box-shadow: 0 0 10px 1px #555;
}

« Queue d'info-bulle » compatible avec plusieurs navigateurs avec Shadow

L'extrait suivant garantit la compatibilité entre navigateurs pour l'effet box-shadow :

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    -moz-box-shadow: 0 0 10px 1px #555;
    -webkit-box-shadow: 0 0 10px 1px #555;
    box-shadow: 0 0 10px 1px #555;
}

Avec ceux-ci techniques, vous pouvez créer des « queues d'info-bulles » personnalisées en CSS qui améliorent l'attrait visuel et la fonctionnalité de vos éléments Web.

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!