Wie erstelle ich mit CSS einen Chevron-Pfeil mit hohlen Linien?

So erstellen Sie mit CSS einen Chevron-Pfeil mit Hohllinien

Die Technik zum Erstellen eines massiven Dreiecks mit CSS ist weithin bekannt, aber wie kann man einen Hohlpfeil erstellen? Stattdessen eine -ähnliche Form?

Ein Ansatz besteht darin, Pseudoelemente (::before oder ::after) zu verwenden und bestimmte CSS-Stile anzuwenden. Sie können beispielsweise sowohl ::before- als auch ::after-Elemente hinzufügen, um jeden Balken des Pfeils darzustellen, und transform:rotate verwenden, um sie richtig zu positionieren.

Alternativ gibt es hier eine einfachere Lösung:

Verwenden von Rändern bei Pseudoelementen

Fügen Sie Ränder zum ::before-Element hinzu und drehen Sie es mit transform: rotation:

<code class="css">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;
}</code>

Alternative Lösung unter Verwendung eines tatsächlichen Elements

Anstatt Pseudoelemente zu verwenden, können Sie eine Liste erstellen und diese mit CSS formatieren:

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

li::before {
    content: ">"; /* Replace with any desired arrow character */
    font-size: 1.5em; /* Adjust font size as needed */
}</code>

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