Wie erstelle ich mit CSS einen hohlen Chevron-Pfeil?

Erstellen eines Chevron-Pfeils mit CSS

Frage

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]

Antwort

Sie können diese Art von Pfeil mithilfe der Vorher- oder Nachher-Pseudoelemente mit CSS erstellen. Hier ist eine Aufschlüsselung des Prozesses:

• Fügen Sie das Vorher- oder Nachher-Pseudoelement zu Ihrem gewünschten Element hinzu.
• Wenden Sie CSS-Stile an, um das Aussehen und die Position des Pseudoelements anzupassen.

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:

• Erstellen Sie ein neues oder
  Element in Ihrem HTML.
• Verwenden Sie CSS, um das Element als Pfeil zu gestalten, einschließlich seiner Größe, Farbe und Drehung.

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.