Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS einen hohlen Chevron-Pfeil?
Mit CSS können Sie ganz einfach ein ausgefülltes Dreieck erstellen, wie das Code-Snippet zeigt unten:
<code class="css">#triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }</code>
Aber wie erstellt man ein hohles, pfeilartiges Dreieck, wie im Bild unten dargestellt?
[Bild eines Chevron-Pfeils]
Sie können diese Art von Pfeil mithilfe der Vorher- oder Nachher-Pseudoelemente mit CSS erstellen. Hier ist eine Aufschlüsselung des Prozesses:
Zum Beispiel können Sie das folgende CSS verwenden:
<code class="css">::before { content: ""; position: absolute; width: 0.5em; height: 0.5em; border-top: 1px solid black; border-right: 1px solid black; transform: rotate(45deg); margin-right: 0.5em; }</code>
Dieses CSS erstellt ein hohles Dreieck mit einem schwarzen Umriss, das um 45 Grad gedreht ist. Sie können die Eigenschaften Breite, Höhe und Rand anpassen, um das Erscheinungsbild anzupassen.
Alternativ können Sie diesen Effekt auch ohne die Verwendung von Pseudoelementen erzielen:
Hier ist ein Beispiel:
<code class="css">.chevron { display: inline-block; width: 0.5em; height: 0.5em; border-top: 1px solid black; border-right: 1px solid black; transform: rotate(45deg); margin-right: 0.5em; }</code>
In diesem Fall können Sie die .chevron-Klasse zu Ihrem gewünschten Element hinzufügen, um den Pfeileffekt zu erzeugen.
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen hohlen Chevron-Pfeil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!