Code zum Implementieren eines einfachen Pfeilsymbols mithilfe von div+CSS in HTML

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

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

Geben Sie zuerst den CSS-Code ein

 /*Pfeil nach oben*/.to_top { width: 0; height: 0; border-bottom: 10px solid transparent;}/*Arrow down*/ . to_bottom { width: 0; height: 0; border-top: 10px solid #ccc; 10px durchgehend transparent;}/*Pfeil nach links*/.to_left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;} / *Pfeil nach rechts*/ .to_right { width: 0; height: 0; border-left: 10px solid #cccf; transparent; Rand unten: 10 Pixel durchgehend transparent;}

HTML-Code

 <p>Pfeil nach oben</p><div class=to_top></div><p>Pfeil nach links</p><div class=to_left></div><p>Pfeil nach rechts</p>< div-Klasse =to_right></div><p>Pfeil nach unten</p><div class=to_bottom></div>

Ergebnisse der Codeausführung

Wenn Sie der Meinung sind, 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-Rahmens anpassen.

Bei der Änderung des dreispaltigen Themes gestern berichteten einige Benutzer, dass ein großer Links- und Rechtspfeil hinzugefügt werden sollte. Obwohl es sehr einfach zu implementieren ist (Sie können stattdessen ein Hintergrundbild verwenden), müssen Sie eine Hintergrundfunktion hinzufügen, mit der Sie die Farbe anpassen können. Deshalb habe ich mir überlegt, DIV + CSS zum Zeichnen von Pfeilen zu verwenden, damit Sie das einfach anpassen können Farbe der Pfeile.

CSS-Code

 .text{ display: inline-block; border-right: 2px solid; border-color: #EA6000; margin: 50px; automatisch 100px;}

HTML-Code

<span class=text></span>

Ergebnisse der Codeausführung

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

transform: rotate(-135deg);/*调整旋转的角度*/

Das Obige ist der Code, den Ihnen der Herausgeber vorstellt, um mit div+CSS ein einfaches Pfeilsymbol in HTML zu implementieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht pünktlich zu Ihnen. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!