Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Beispielcode zum Realisieren des scharfen Eckeneffekts eines Blasendialogfelds mit reinem CSS

零下一度
Freigeben: 2017-06-29 15:58:43
Original
1560 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;  
    }  
  }  
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!