Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement

Im Frontend-Designentwurf sieht man oft Schließen-Buttons in Form von „X“, „>“ und hohlen Pfeilsymbolen in drei andere Richtungen. Es gibt viele Möglichkeiten, CSS zu implementieren. Nachdem ich es ausprobiert hatte, stellte ich fest, dass es nicht leicht zu merken ist. Heute werde ich eine einfache Methode schreiben, um es mit dem Pseudoelement „after“ zu implementieren.

1. Schließen-Symbol

HTML-Teil

<span class="schließen"></span>

CSS-Teil

.schließen{
    Anzeige: Inline-Block;
    Breite: 14px;
    Höhe: 1px;
    Hintergrund: #95835e;
    transformieren: drehen (45 Grad);
    -webkit-transform: drehen(45 Grad);
}
.suClose:nach {
    Inhalt: '';
    Anzeige: Block;
    Breite: 14px;
    Höhe: 1px;
    Hintergrund: #95835e;
    transformieren: drehen (-90 Grad);
    -webkit-transform: drehen(-90 Grad);
}

Das Prinzip besteht darin, mit dem Span-Element und dem After-Pseudoelement zwei gerade Linien zu zeichnen und sie mit dem Transform-Attribut von CSS3 separat zu drehen, um den Schnittpunkteffekt zu erzielen.

2. Hohler Dreieckspfeil

HTML-Teil

<span class="arrowUp"></span>

CSS-Teil

.arrowUp:nach {
    Inhalt: '';
    Anzeige: Inline-Block;
    Breite: 8px;
    Höhe: 8px;
    Rahmen oben: 1px durchgezogen #656565;
    Rahmen rechts: 1px durchgezogen #656565;
    transformieren: drehen (-45 Grad);
    -webkit-transform: drehen(-45 Grad);
}

HTML-Teil

<span class="arrowUp"></span>

CSS-Teil

.arrowUp:nach {
    Inhalt: '';
    Anzeige: Inline-Block;
    Breite: 8px;
    Höhe: 8px;
    Rahmen oben: 1px durchgezogen #656565;
    Rahmen rechts: 1px durchgezogen #656565;
    transformieren: drehen (45 Grad);
    -webkit-transform: drehen(45 Grad);
}

Das Prinzip besteht darin, mit dem Pseudoelement „after“ ein Rechteck zu zeichnen, das nur die obere und rechte Grenze darstellt und so eine Pfeilform bildet, und dann mit dem Attribut „transform“ den Winkel anzupassen, um unterschiedliche Ausrichtungen zu erzielen. Hier sind Beispiele für zwei Richtungen aufgeführt. Für die anderen beiden Richtungen müssen Sie lediglich die Winkel ändern.

Dies ist das Ende dieses Artikels über das Beispiel der Verwendung des Pseudoelements „after“, um einen hohlen Dreieckspfeil und ein X-Symbol zu implementieren. Weitere Informationen zur Implementierung eines hohlen Dreieckspfeils und eines X-Symbols mit „after“ finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!