Comment implémenter l'effet bulle de discussion en CSS3 ? (exemple de code)

Le contenu de cet article est de présenter la méthode CSS3 pour obtenir intelligemment l'effet de bulle de discussion. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La révision de la page mobile que j'ai osé jouer il y a quelque temps est terminée. Le style de page précédent est plus plat, passant du fond sombre au fond clair, supprimant plus d'ombres et offrant aux utilisateurs un style d'expérience simple. haha, je ne suis pas designer, mais je vais trop commenter. Les amis intéressés peuvent accéder directement à la page d'accueil mobile d'idarex.

Tous les styles de cette révision sont écrits par orange. J'ai beaucoup de sentiments, je vais donc les partager avec vous en plusieurs fois

Passons maintenant au point. des bulles sur lesquelles nous nous sommes mis d'accord ?

Bulle de discussion traditionnelle

Qu'est-ce qu'une bulle de discussion traditionnelle ? Il suffit d'aller sur l'image ci-dessus

Le code est le suivant

<p></p>

<style>
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

Tout le monde a entendu parler des méthodes d'implémentation, telles que les rectangles arrondis et les triangles. Le principe des triangles est que la bordure peut être définie comme transparente. Vous pouvez copier le code dans l'exemple ci-dessus et modifier le attribut pour explorer la mise en œuvre du triangle. border-color

Remarque : IE8 et les versions antérieures n'ont pas un très bon support pour les bordures transparentes. Vous pouvez ignorer les défauts de la version inférieure, car la plupart des navigateurs s'affichent normalement. Si vous devez être compatible, définissez l'attribut transparent sur la couleur de fond principale au lieu de la couleur de fond de la bulle (à condition que le fond soit une couleur unie).

Tout le monde doit le savoir, je n'entrerai donc pas dans les détails ici. Parlons d'autres méthodes de mise en œuvre.

La partie triangulaire ici peut être remplacée par un carré pour obtenir le même effet. La méthode consiste à faire pivoter le petit carré pour qu'une partie de celui-ci soit exposée. Le code est le suivant

.comment {
  position: relative;
  width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

L'inconvénient est que le petit triangle ne peut être qu'un triangle rectangle. Bien sûr, il peut aussi être transformé en losange puis épissé. ne semble pas aussi direct que la première méthode. Le navigateur est compatible avec transform(2D) Les propriétés sont les suivantes

Dans l'ensemble, c'est plutôt bien, vous pouvez l'utiliser en toute confiance. plusieurs méthodes, et il n’y a pas de problèmes de compatibilité majeurs.

Cas réel

Le brouillon de conception ici a une bordure supplémentaire, que diriez-vous de télécharger directement le brouillon de conception

 ? Réfléchissez à la façon de le gérer, passons en revue ce qui précède

La première méthode elle-même est

transparente, comment la définir border est un problème, n'y pensons pas pour l'instant. border

Si vous utilisez une petite rotation carrée dans la deuxième méthode, la superposition de calques est un problème, car l'arrière-plan de la bulle dans le brouillon de conception est

Jetons d'abord un coup d'œil au code d'implémentation rgba(247, 188, 10, 0.03)

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

L'effet est le suivant

Il y a un problème avec l'idée ci-dessus, car le petit carré chevauchera une partie de la bulle, et il y aura toujours des problèmes avec le fond semi-transparent. Quelqu'un a dit qu'il n'y avait rien de mal à être paresseux. La couleur de fond transparente est extraite puis superposée (car tout le monde a remarqué que l'arrière-plan global du brouillon est une couleur unie)

Si nous mettez-le en œuvre selon cette idée, alors le problème se pose à nouveau. Les deux questions spécifiques sont les suivantes.

1. Si le petit carré est superposé sur le dessus, alors la bordure de la moitié gauche du petit carré sera affichée

.comment {
  width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

L'effet est le suivant. photo précédente, le côté droit du rectangle arrondi est bien couvert, mais la bordure sur le côté gauche du petit carré est affichée

La façon de le gérer est la suivante. .

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

Nous avons constaté que le problème était résolu. L'effet est le suivant

Le projet de conception est disponible

Il est réalisable dans ce cas pour des tests personnels, mais basé sur le principe de sérieuxpaddingSi. il est trop petit, quels problèmes vont survenir ? padding-right

Nous ajoutons du texte à la p.

<p>Hello,orange.Welcome to FrontEnd World!</p>

L'effet est le suivant

On constate que le coin inférieur droit de la lettre o est recouvert par le côté gauche du petit carré , bien sûr, il peut être piraté via l'attribut

. z-index

2. Si le petit carré est sous le rectangle arrondi, alors la bordure droite du rectangle arrondi sera entièrement affichée. Vous pouvez vous faire votre propre opinion. Cette solution est déraisonnable, mais je ne veux pas. trop expliquer.

Les défauts des méthodes ci-dessus sont également évidents. Alors, comment pouvons-nous le faire avec plus de rigueur et ne pas blesser les muscles et les os en fonction de l'évolution de la demande ?

Nous utilisons également le plan triangle ! Quoi ? Cela ne veut-il pas dire que la solution triangulaire n’est pas réalisable ?

Un triangle n'est pas réalisable. Quant à ces deux-là, nous avons invité le frère de

after à comparaître. Le vrai code du projet est le suivantbefore

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid rgba(#fcb908, 0.35);
  border-radius: 0.2rem;
  background-color: rgba(#f7bc0a, 0.03);

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

注：这段代码用的是 SASS 进行预编译，如果从头仔细看到这里的话不难理解，两个三角形叠加，大三角形颜色是边框的颜色，小三角形是内部背景色，小三角形绝对定位时向下移 3px 把圆角矩形的一部分上边框遮挡，这样小三角下部也有溢出，具体在两像素之内，实际上不存在遮挡文本问题。

总结

实际问题解决的方法很多，就看大家怎么去思考，这个方案也不是最满意的方案，因为多了一个伪元素，主要还是设计思想的多样性，总之 css 很灵活。

有人不禁会问，这里设计稿给的是向上的箭头，为什么例子里却都是向右的，这里向右的都是我写的 demo ，理解原理的话，改变个位置方向都是大同小异。

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!