Beispielcode zur Implementierung von Dreiecken und Pfeilen durch CSS-Rahmen

1. CSS-Boxmodell

Die Box beinhaltet: Rand, Rahmen, Polsterung, Inhalt
Die Ränder haben an ihren Verbindungsstellen glatte, schräge Linien. Mit dieser Funktion können Sie kleine Dreiecke und Ähnliches erhalten, indem Sie die Breite und Farbe jedes Randes festlegen.
Das Div-Element ist ein Element auf Blockebene und wird als Blockbox angezeigt, die für spezifische Implementierungen verwendet werden kann.

<div Klasse="Dreieck"></div>
<div Klasse="Pfeil"></div>

**Beispiel 1. **Im Allgemeinen sieht die Box nach dem Festlegen von Höhe, Breite und Rahmen wie folgt aus:

.Dreieck {
   Breite: 25px;  
   Höhe: 25px;  
   Überlauf: versteckt;
   Schriftgröße: 0;
   Zeilenhöhe: 0;            
   Rahmenbreite: 50px;               
   Rahmenstil: durchgezogen;
   Rahmenfarbe: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

Hinweis: Überlauf, Schriftgröße und Zeilenhöhe werden festgelegt, da IE6 die Standardschriftgröße und -zeilenhöhe verwendet, wodurch das Feld als gestrecktes langes Rechteck angezeigt wird.

Beispiel 2: Nachdem die Breite und Höhe in Beispiel 1 auf 0 gesetzt wurden, sieht die Box wie folgt aus:

.Dreieck {
  Breite: 0;  
  Höhe: 0;  
  Überlauf: versteckt;
  Schriftgröße: 0;
  Zeilenhöhe: 0;            
  Rahmenbreite: 50px;               
  Rahmenstil: durchgezogen;
  Rahmenfarbe: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

An diesem Punkt können Sie sehen, dass die Box aus vier Dreiecken besteht. Wenn Sie nur eine Farbe beibehalten und die anderen drei Farben transparent oder auf die gleiche Farbe wie den Hintergrund einstellen, können Sie ein Dreieck erzielen. Abhängig davon, welche Kanten Sie an unterschiedlichen Stellen belassen, können Sie Dreiecke mit unterschiedlichen Ausrichtungen darstellen.

Beispiel 3: Nur die untere Kante behalten

.Dreieck {
   Breite: 0;  
   Höhe: 0;  
   Überlauf: versteckt;
   Schriftgröße: 0;
   Zeilenhöhe: 0;            
   Rahmenbreite: 50px;               
   Rahmenstil: durchgezogen;
   Rahmenfarbe: transparent transparent rgb(76, 0, 255) transparent;
}

Beispiel 4: Die Breite und Höhe aus Beispiel 3 werden beibehalten, um ein Trapez zu erhalten

Breite: 0;  
Höhe: 0;

Beispiel 5: Implementierung von Pfeilen

Der Pfeil entsteht eigentlich durch das Übereinanderstapeln zweier Dreiecke in versetzter Position.
Decken Sie das blaue Dreieck mit einem um 1 Pixel versetzten weißen Dreieck ab, sodass ein Pfeil entsteht.

Der folgende Stil implementiert einen Aufwärtspfeil:

. Pfeil {
   Position: absolut;
}
. Pfeil:vorher,. Pfeil:nachher{
   Position: absolut;
   Inhalt: '';
   Rahmen oben: 10px transparenter Feststoff;
   Rahmen links: 10px transparenter Feststoff;
   Rahmen rechts: 10px transparenter Feststoff;
   Rahmen unten: 10px #fff durchgezogen;
}
. Pfeil:vor{
   Rahmen unten: 10px #0099CC durchgezogen;
}
. Pfeil:nach{
   oben: 1px; /*Überschreiben und 1px versetzen*/
   Rahmen unten: 10px #fff durchgezogen;
}

Zusammenfassen

Oben ist der Beispielcode, den ich Ihnen vorgestellt habe, um Dreiecke und Pfeile durch CSS-Ränder zu realisieren. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!