Wie kann ich mit CSS-Techniken einen Chevron-Pfeil erstellen?

Erstellen eines Chevron-Pfeils mit CSS-Techniken

Mit CSS kann ein Chevron-Pfeil erstellt werden, der durch zwei diagonale Linien gekennzeichnet ist, die sich in einem Punkt schneiden wird mit verschiedenen Ansätzen erreicht.

Eine Methode nutzt Pseudoelemente wie before oder after, die mit CSS-Eigenschaften angewendet werden. Durch das Hinzufügen von Vorher- und Nachher-Elementen, deren Drehung und strategische Positionierung entsteht die Pfeilform. Alternativ können Sie dem Before-Element zwei Rahmen hinzufügen und es mit transform:rotate drehen.

Ein anderer Ansatz besteht darin, ein tatsächliches HTML-Element anstelle von Pseudoelementen zu verwenden. Dies kann durch das Einfügen von Pfeilen als Aufzählungszeichen in eine Liste erreicht werden. Durch die Verwendung von em-Einheiten für die Pfeilabmessungen können Sie sicherstellen, dass sie entsprechend der Schriftgröße der Liste skaliert werden.

Der folgende CSS-Code demonstriert den letzteren Ansatz:

<code class="css">ul {
  list-style: none;
}

ul.big {
  list-style: none;
  font-size: 300%
}

li::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}

li:hover {
  color: red; /* For the text */
}

li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}</code>

Anzeige des HTML-Codes die Verwendung:

<code class="html"><ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

<ul class="big">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul></code>

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS-Techniken einen Chevron-Pfeil erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!