Heim > Artikel > Web-Frontend > So erstellen Sie ein Pfeilsymbol mit CSS

So erstellen Sie ein Pfeilsymbol mit CSS

不言Original: 2018-12-08 10:45:517304Durchsuche

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

So erstellen Sie ein Pfeilsymbol mit CSS

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

So erstellen Sie ein Pfeilsymbol mit CSS

„Größer als“-Pfeil

CSS-Code

.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow::before{
  content: &#39;&#39;;
  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

So erstellen Sie ein Pfeilsymbol mit CSS

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

So erstellen Sie ein Pfeilsymbol mit CSS

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

So erstellen Sie ein Pfeilsymbol mit CSS

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!

php css html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So passen Sie den Stil der Bildlaufleiste in CSS3 anNächster Artikel：So passen Sie den Stil der Bildlaufleiste in CSS3 an

In Verbindung stehende Artikel

Mehr sehen