Heim > Artikel > Web-Frontend > So erstellen Sie ein Pfeilsymbol mit CSS
So erstellen Sie ein Pfeilsymbol mit CSS
- 不言Original
- 2018-12-08 10:45:517234Durchsuche
Wir können oft Pfeilsymbole sehen. Wie können wir also CSS verwenden, um Pfeilsymbole zu erstellen, ohne Bilder zu verwenden? In diesem Artikel erfahren Sie, wie Sie Pfeilsymbole mit CSS erstellen.
Es gibt nicht viel zu sagen, gehen wir direkt zum Text~
Wie man Pfeilsymbole mit CSS erstellt
Sie können Pfeile einfach mit CSS erstellen, ohne Bilder zu verwenden.
Sehen wir uns zunächst an, wie ein Pfeil implementiert wird. Ich werde einen L-förmigen Pfeil von der oberen linken Ecke zur unteren rechten Ecke erstellen.
Ein Pfeil, der sich im rechten Winkel dreht.
Der Code lautet wie folgt
HTML-Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS arrow</title> <link rel="stylesheet" type="text/css" href="sample.css"> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> </head> <body> <div class="arrow"></div> </body> </html>
CSS-Code
sample.css
.arrow{
position: relative;
width: 200px;
height: 50px;
border-top: 8px solid #5bc0de;
border-right: 8px solid #5bc0de;
box-sizing: border-box;
}
.arrow::after{
content: "";
position: absolute;
bottom: -14px;
right: -17px;
border-top: 14px solid #5bc0de;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}Laufergebnisse
Der folgende Effekt wird im Browser angezeigt
Der als nächstes eingeführte HTML-Code zum Erstellen mehrerer Pfeilsymbole ist derselbe wie oben. Wir ändern ihn hauptsächlich den CSS-Code. Implementieren Sie
Dreieckspfeil
CSS-Code
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
box-sizing: border-box;
width: 12px;
height: 12px;
border: 1px solid #ff0000;
-webkit-border-radius: 25%;
border-radius: 25%;
}
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
left: 5px;
box-sizing: border-box;
width: 3px;
height: 3px;
border: 3px solid transparent;
border-left: 3px solid #ff0000;
}Der laufende Effekt ist wie folgt
zeigt ein Symbol an mit einem roten Dreieck
„Größer als“-Pfeil
CSS-Code
.arrow{
position: relative;
display: inline-block;
padding-left: 20px;
}
.arrow::before{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #5bc0de;
border-right: solid 2px #5bc0de;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}
Ergebnis ausführen
Die Auswirkung der Ausführung im Browser ist wie folgt
Dieses Pfeilsymbol wird häufig auf Webseiten verwendet
Pfeil nach oben machen
CSS-Code
.arrow{
width: 0px;
border-color: #d9534f;
border-style: solid;
border-width: 30px;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}Laufeffekt
zeigt den folgenden Effekt im Browser an
Schließlich werfen wir einen Blick auf das traditionelle Rechtspfeilsymbol
CSS-Code
.arrow {
display:inline-block;
height:40px;
width:80px;
background-color:#5bc0de;
position:relative;
top:40px;
}
.arrow:before {
position:absolute;
content:"";
width:0;
height:0;
border:60px solid transparent;
border-left:60px solid #5bc0de;
left:80px;
top:-37px;
}Das laufende Ergebnis
Im Browser wird der Effekt wie unten gezeigt angezeigt
Dieser Artikel endet hier. Für weitere verwandte spannende Inhalte können Sie zu PHP wechseln. Erfahren Sie mehr in der Spalte CSS Video Tutorial der chinesischen Website! ! !
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Pfeilsymbol mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!