Beispielcode zum Realisieren des scharfen Eckeneffekts eines Blasendialogfelds mit reinem CSS

Dieser Artikel stellt hauptsächlich den Implementierungscode von reinem CSS vor, um die scharfe Eckenverarbeitung von Blasendialogfeldern zu implementieren. Er ist sehr gut und hat Referenzwert.

Nehmen wir zunächst ein Blick auf die Renderings:

Einfacher und grober Code:
html:

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

weniger :

.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;  
    }  
  }  
}

Umgangssprachliche Erklärung:

Wenn Sie scharfe Ecken in andere Richtungen wünschen, passen Sie die Reihenfolge der Rahmenfarbe an (oben, rechts, unten, links).

Das Hauptprinzip besteht wahrscheinlich darin, zwei kleine Dreiecke mit derselben Form, aber unterschiedlichen Proportionen zu haben, einen durchgehenden Dreiecksbot mit derselben Hintergrundfarbe und eine Oberseite mit weißem Hintergrund, und die Oberseite bedeckt den Bot. und passen Sie dann ihre Größe an (im Allgemeinen sind die durchgezogenen Kanten größer als die weißen, sodass die blinkenden Kanten angezeigt werden können).

Schließlich habe ich alle Mittel ausprobiert, um sie überlappen zu lassen (das weiße Oberteil ist oben, der einfarbige Bot ist unten), und habe schließlich dafür gesorgt, dass sie sich überlappen, indem die Parameter (links, oben) von absolut angepasst wurden Positionierung Nahtlos. Okay, du bist fertig. Ich frage mich, ob du es verstanden hast?

Das obige ist der detaillierte Inhalt vonBeispielcode zum Realisieren des scharfen Eckeneffekts eines Blasendialogfelds mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!