Comment créer une bulle de discours avec CSS

Pour créer une bulle de discours CSS, vous devez utiliser un conteneur Div avec des pseudo-éléments; 1. Créez la structure de base DIV et définissez le style rectangle. 2. Créez des pointeurs avec :: Après les pseudo-éléments: en réglant la largeur et la hauteur sur 0, utilisez la bordure pour générer un triangle, tel que la bordure en tant que couleur solide, la bordure de gauche est transparente, puis utilise absolue pour la positionner vers le bas; 3. Ajustez la position et la direction du pointeur: par exemple, en haut: -10px pour implémenter la flèche de pointage supérieure, à gauche: 50% pour être centré avec Transform: Translatex (-50%); 4. Apparence personnalisée: définissez différentes couleurs d'arrière-plan pour différents utilisateurs, ajoutez Box-Shadow pour améliorer le sens de la superposition, ajustez la largeur de la bordure pour modifier la taille du pointeur; Dans l'exemple, la classe .receiver utilise un fond gris clair pour s'aligner avec la gauche, et le pointeur est situé sur le côté gauche du bas, et réalise enfin une conception de bulles de discours légère et flexible, aucun éléments HTML supplémentaires n'est requis et se termine par une phrase complète.

La création d'une bulle de la parole avec CSS est une tâche de conception courante pour les interfaces de chat, les toolstips ou les sections de commentaires. Vous pouvez y parvenir en utilisant des propriétés CSS de base et un pseudo-élément pour le pointeur (le petit triangle qui pointe vers le haut-parleur). Voici comment le faire étape par étape.

Structure de base

Commencez par une simple div qui agira comme la bulle de la parole:

 <div class = "Speech-bubble"> Bonjour, c&#39;est une bulle de la parole! </div>

1. Style le conteneur de bulles

Tout d'abord, style le récipient principal pour ressembler à un rectangle arrondi (typique des bulles de la parole):

 .speech-buble {
  Position: relative;
  Contexte: # 007BFF;
  Couleur: blanc;
  rembourrage: 15px 20px;
  Border-Radius: 18px;
  largeur maximale: 300px;
  Font-Family: Arial, Sans-Serif;
  hauteur de ligne: 1.4;
}

Points clés:

• border-radius donne les bords doux et arrondis.
• max-width empêche la bulle de s'étirer trop largement.
• position: relative est nécessaire pour que le pointeur (flèche) puisse être positionné correctement en utilisant le positionnement absolu.

2. Ajouter le pointeur avec un pseudo-élément

Utilisez le ::after pseudo-élément pour créer le pointeur triangle:

 .speech-bubble :: After {
  contenu: '';
  Position: absolue;
  En bas: -10px;
  Gauche: 20px;
  Largeur: 0;
  hauteur: 0;
  Border-Left: 10px solide transparent;
  Border-droite: 10px solide transparent;
  Border-top: 10px solide # 007BFF;
}

Comment ça marche:

• Le triangle est créé à l'aide des bordures CSS. En fixant trois côtés à transparent et un (haut) sur la même couleur que la bulle, vous obtenez un triangle pointant vers le bas.
• bottom: -10px positionne le pointeur juste en dessous de la bulle.
• left: 20px où la flèche apparaît le long du bord inférieur.

3. Facultatif: ajuster la position et la direction du pointeur

Vous pouvez changer lorsque le pointeur apparaît ou pointe dans différentes directions:

• Pointeur supérieur (pour un haut-parleur ci-dessous):

   .speech-bubble :: After {
    en haut: -10px;
    En bas: automatique;
    Border-top: Aucun;
    Border-Bottom: 10px solide # 007BFF;
  }

• Points gauche ou droit: utilisez border-left ou border-right et ajustez top et left/right en conséquence.

• Centre le pointeur: Utilisez left: 50% et transform: translateX(-50%) pour le centrage horizontal.

   .speech-bubble :: After {
    Gauche: 50%;
    Transform: Translatex (-50%);
  }

4. Personnaliser l'apparence

• Modifier les couleurs pour différents utilisateurs (par exemple, expéditeur vs récepteur).
• Ajoutez une ombre subtile pour la profondeur:

   Box-Shadow: 0 2px 5px RGBA (0, 0, 0, 0,1);

• Ajustez la taille du pointeur en modifiant la largeur de la bordure.

Exemple: bulle du récepteur (à gauche, couleur différente)

 .receiver {
  Contexte: # E9E9EB;
  Couleur: noir;
  ALIGN-SEG: Flex-Start;
}

.receiver :: After {
  Gauche: 30px;
  Border-top: 10px solide # e9e9eb;
  En bas: -10px;
}

Et en html:

 <div class = "Speech-buble récepteur"> Salut! </div>

Fondamentalement, l'astuce consiste à combiner un récipient stylé avec un triangle fabriqué à partir de bordures à l'aide d'un pseudo-élément. Une fois que vous comprenez comment fonctionne le triangle basé sur les frontières, vous pouvez le positionner n'importe où et pointer dans n'importe quelle direction. Il est flexible, léger et ne nécessite pas d'éléments HTML supplémentaires.

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!