Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen

1. Mehrere Aufrufe eines einzelnen Pfeils

Sobald ein einzelner Pfeil implementiert ist, ist es einfach, einen Doppelpfeil zu implementieren. Oben wurden zwei Prinzipien zur Implementierung eines einzelnen Pfeils vorgestellt: Randrotationsmethode und Doppeldreieck-Überlagerungsmethode. Dieses Mal verwenden wir die Randrotation als Beispiel, um sie mehrmals aufzurufen und den Doppelpfeil zu implementieren.
1. Implementierung der Grenzrotation mit einem einzigen Pfeil

.Pfeil nach rechts
  Höhe: 120px;
  Breite: 30px;
  Anzeige: Inline-Block;
  Position: relativ;
}
.arrow-right::nach {
  Inhalt: "";
  Höhe: 60px;
  Breite: 60px;
  oben: 12px;
  Rahmenbreite: 8px 8px 0 0;
  Rahmenfarbe: blau;
  Rahmenstil: durchgezogen;
  Transformation: Matrix (0,71, 0,71, -0,71, 0,71, 0, 0);
  Position: absolut;
}

Das Wirkungsdiagramm sieht wie folgt aus:

2. Mehrere Aufrufe eines einzelnen Pfeils

<div>
	<span class="Pfeil-rechts"/>
    <span class="Pfeil-rechts"/>
</div>

Das Wirkungsdiagramm sieht wie folgt aus:

2. Zeichnen Sie Doppelpfeile direkt durch Drehen des Rahmens

Bisher wurde ein einzelner Pfeil mit dem Pseudoelement ::after gezeichnet. Wenn Sie nun das Pseudoelement ::before hinzufügen und einen weiteren einzelnen Pfeil zeichnen, können Sie mit reinem CSS einen Doppelpfeil zeichnen.

.Pfeil nach rechts
  Höhe: 120px;
  Breite: 30px;
  Anzeige: Inline-Block;
  Position: relativ;
}
.arrow-right::vor {
  Inhalt: "";
  Höhe: 60px;
  Breite: 60px;
  oben: 12px;
  links: 30px;
  Rahmenbreite: 8px 8px 0 0;
  Rahmenfarbe: blau;
  Rahmenstil: durchgezogen;
  Transformation: Matrix (0,71, 0,71, -0,71, 0,71, 0, 0);
  Position: absolut;
}
.arrow-right::nach {
  Inhalt: "";
  Höhe: 60px;
  Breite: 60px;
  oben: 12px;
  Rahmenbreite: 8px 8px 0 0;
  Rahmenfarbe: blau;
  Rahmenstil: durchgezogen;
  Transformation: Matrix (0,71, 0,71, -0,71, 0,71, 0, 0);
  Position: absolut;
}

Das Wirkungsdiagramm sieht wie folgt aus:

Mit der Doppeldreieck-Überlagerungsmethode können Sie auch direkt Doppelpfeile zeichnen, die Implementierung ist jedoch komplizierter. Sie ist nicht so einfach zu implementieren wie die Randrotationsmethode.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen. Weitere relevante CSS-Inhalte zum Zeichnen von Doppelpfeilen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!