Code zur Implementierung eines einfachen Pfeilsymbols mit Div+CSS in HTML

Beim Webdesign verwenden wir Pfeile oft als Dekoration, um unsere Webseiten zu verschönern. Obwohl viele Website-Designer heute gerne Schriftsymbole verwenden, um den Effekt von Pfeilen zu erzielen, hat dies auch Auswirkungen auf das Laden der Webseite. Heute erklärt Ihnen der Herausgeber von Feiniao Muyu, wie Sie mit Div und CSS einige Pfeileffekte im Webdesign erzielen.

DIV+CSS, um den Effekt eines durchgezogenen kleinen Pfeils zu erzielen

In einigen sekundären Navigationsmenüs auf Webseiten oder Listen mit Dropdown-Funktionen sind kleine Pfeile implementiert, um anzuzeigen, dass ein DIV Inhalt enthält. Wie implementieren wir also den Stil dieser kleinen Pfeile?

Erstens der CSS-Code

/*Pfeil nach oben*/
.nach_oben {
    Breite: 0;
    Höhe: 0;
    Rahmen unten: 10px durchgezogen #ccc;
    Rahmen links: 10px durchgehend transparent;
    Rahmen rechts: 10px durchgehend transparent;
}
/*Pfeil nach unten*/
.nach_unten {
    Breite: 0;
    Höhe: 0;
    Rahmen oben: 10px durchgezogen #ccc;
    Rahmen links: 10px durchgehend transparent;
    Rahmen rechts: 10px durchgehend transparent;
}
/*Pfeil zeigt nach links*/
.nach_links {
    Breite: 0;
    Höhe: 0;
    Rahmen rechts: 10px durchgezogen #ccc;
    Rahmen oben: 10px durchgehend transparent;
    Rahmen unten: 10px durchgehend transparent;
}
/*Pfeil nach rechts*/
    .nach_rechts {
    Breite: 0;
    Höhe: 0;
    Rahmen links: 10px durchgezogen #cccf;
    Rahmen oben: 10px durchgehend transparent;
    Rahmen unten: 10px durchgehend transparent;
}

HTML Code

<p>Pfeil nach oben</p>
<div Klasse="nach oben"></div>
<p>Linker Pfeil</p>
<div Klasse="nach_links"></div>
<p>Rechtspfeil</p>
<div Klasse="nach_rechts"></div>
<p>Pfeil nach unten</p>
<div Klasse="nach_unten"></div>

Ergebnisse der Codeausführung

Wenn Sie das Gefühl haben, dass der Pfeil zu groß oder zu klein ist und die Farbe nicht Ihren Wünschen entspricht, können wir die Größe des Pfeils anpassen, indem wir die Dicke und Farbe des DIV-Rands anpassen.

DIV+CSS, um den Effekt eines großen Pfeils zu erzielen

Als ich gestern das Drei-Spalten-Design modifiziert habe, erhielt ich von einem Benutzer das Feedback, dass ein großer Pfeil nach links und rechts hinzugefügt werden sollte. Obwohl die Implementierung sehr einfach ist (Sie können stattdessen ein Hintergrundbild verwenden), müssen Sie eine Hintergrundfunktion hinzufügen, mit der Sie die Farbe anpassen können. Daher dachte ich daran, zum Zeichnen des Pfeils DIV+CSS zu verwenden, damit Sie die Farbe des Pfeils problemlos anpassen können.

CSS Code

.Text{
    Anzeige: Inline-Block;
    Rahmen oben: 2px durchgezogen;
    Rahmen rechts: 2px durchgezogen;
    Breite: 100px;
    Höhe: 100px;
    Rahmenfarbe: #EA6000;
    transformieren: drehen (-135 Grad);
    Rand: 50px, automatisch, automatisch 100px;
}

HTML Code

<span class="text"></span>

Ergebnisse der Codeausführung

Wir können den Pfeiltyp ändern, indem wir den Code unter C ändern, und wir können auch die Breite und Höhe ändern, um die Größe des Pfeils zu ändern.

transform: rotate(-135deg);/*Den Drehwinkel anpassen*/

Zusammenfassen

Oben ist der Code, den ich Ihnen in HTML mit div+CSS vorgestellt habe, um ein einfaches Pfeilsymbol zu implementieren. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!