Techniques d'implémentation pour utiliser des pseudo-éléments CSS pour créer une info-bulle avec un triangle

L'éditeur suivant vous proposera une méthode d'implémentation permettant d'utiliser des pseudo-éléments CSS pour créer une boîte d'invite avec un triangle. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

Les pseudo-éléments CSS sont très utiles. Ils fournissent un moyen d'implémenter certaines fonctions courantes sans éléments DOM redondants.

Ce qui suit est la structure DOM :
Ce qui suit est le style CSS correspondant :

Code XML/HTMLCopier le contenu dans le presse-papiers

<p class="tooltip-wrapper bottom">    
    <p class="arrow"></p>    
    <p class="content">    
        This is content    
    </p>    
</p>

Code CSS Copiez le contenu dans le presse-papiers

.tooltip-wrapper {    
    position: absolute;    
    z-index: 9999;    
    padding: 5px;    
    background: white;    
    border: 1px solid #7d7d7d;    
    border-radius: 5px;    
}    
.tooltip-wrapper .arrow,    
.tooltip-wrapper .arrow:after {    
    position: absolute;    
    display: block;    
    width: 0;    
    height: 0;    
    border-color: transparent;    
    border-style: solid;    
}    
.tooltip-wrapper .arrow {    
    border-width: 11px;    
}    
.tooltip-wrapper .arrow:after {    
    content: "";    
    border-width: 10px;    
}    
.tooltip-wrapper.bottombottom .arrow {    
    top: -11px;    
    left: 50%;    
    margin-left: -11px;    
    border-top-width: 0;    
    border-bottom-color: #7d7d7d;    
}    
.tooltip-wrapper.bottombottom .arrow:after {    
    top: 1px;    
    margin-left: -10px;    
    border-top-width: 0;    
    border-bottom-color: white;    
}

La méthode ci-dessus consistant à utiliser des pseudo-éléments CSS pour créer une boîte d'invite avec un triangle est ce que éditeur partagé avec vous. C'est tout. J'espère qu'il pourra vous donner une référence. J'espère également que vous soutiendrez le site Web PHP chinois.

Pour plus de techniques d'implémentation sur l'utilisation de pseudo-éléments CSS pour créer une boîte de dialogue avec un triangle, veuillez faire attention au site Web PHP chinois pour les articles connexes !