So zeichnen Sie einen Doppelpfeil mit reinem CSS (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie mit reinem CSS einen Doppelpfeileffekt zeichnen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

(Lernvideo-Sharing: css-Video-Tutorial)

1. Rufen Sie den Einzelpfeil mehrmals auf

, um den Einzelpfeil zu implementieren. ~~ Es gab zwei Implementierungen Das oben eingeführte Prinzip des Einzelpfeils: Rahmenrotationsmethode, Doppeldreiecksabdeckungsmethode. Diesmal werden am Beispiel der Grenzrotation mehrere Aufrufe zur Implementierung von Doppelpfeilen durchgeführt.

1. Das Wirkungsdiagramm des mehrfachen Aufrufs eines einzelnen Pfeils

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

ist wie folgt:

<div>
	<span class="arrow-right"/>
    <span class="arrow-right"/>
</div>

. Doppelpfeile direkt davor zeichnen

Verwenden Sie das Pseudoelement ::after, um einen einzelnen Pfeil zu zeichnen, und fügen Sie nun das Pseudoelement ::before hinzu, um einen einzelnen Pfeil zu zeichnen, um eine reine CSS-Zeichnung eines Doppelpfeils zu erreichen.

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::before {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  left: 30px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

Das Rendering ist wie folgt:

Die Doppeldreieck-Überlagerungsmethode kann auch Doppelpfeile direkt zeichnen, ist jedoch schwieriger zu implementieren. Sie ist nicht so einfach zu implementieren wie die Randrotationsmethode, daher werde ich es nicht tun geh hinein.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierlehre

! !

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie einen Doppelpfeil mit reinem CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!