Exemple de code pour réaliser l'effet de coin pointu de la boîte de dialogue à bulles en utilisant du CSS pur

Cet article présente principalement le code d'implémentation du CSS pur pour implémenter le traitement des coins pointus des boîtes de dialogue à bulles. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Tout d'abord, prenons. un aperçu des rendus :

Code simple et brut :
html :

<p class="dialog-box">  
  <span class="bot"></span>  
  <span class="top"></span>  
</p>

moins :

.dialog-box {  
  position: relative;  
  span {  
    width:0;   
    height:0;   
    font-size:0;   
    overflow:hidden;   
    position:absolute;  
    &.bot{  
      border-width: 15px;   
      border-style: solid dashed dashed;   
      border-color: transparent transparent #F9743A transparent;   
      left: 15px;   
      top: -29px;  
    }  
    &.top{  
      border-width:13px;   
      border-style:solid dashed dashed;   
      border-color:transparent transparent #fff transparent;   
      left:17px;   
      top:-25px;  
    }  
  }  
}

Explication vernaculaire :

Si vous souhaitez des angles vifs dans d'autres directions, ajustez l'ordre de la couleur de la bordure (haut, droite, bas, gauche).

Le principe principal est probablement d'avoir deux petits triangles de même forme mais de proportions différentes, un bot triangle plein avec la même couleur de fond, et un haut avec un fond blanc, et le haut couvrira le bot, puis Ajustez leur taille (en général, les solides sont plus grands que les blancs, afin que les bords clignotants puissent être affichés).

Enfin j'ai essayé tous les moyens pour les faire se chevaucher (le dessus blanc est en haut, le bot solide est en dessous), et enfin je les ai fait se chevaucher en ajustant les paramètres (gauche, haut) du positionnement absolu Sans couture. D'accord, vous avez terminé. Je me demande si vous l'avez compris ?

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!