Heim > Artikel > Web-Frontend > Wie schreibe ich einen Pfeil mit CSS3?
So schreiben Sie Pfeile mit CSS3: Erstellen Sie zunächst eine Front-End-Beispieldatei. Verwenden Sie dann die Transformationseigenschaft in CSS3, um ein kleines Quadrat ohne Hintergrund zu implementieren. Schließlich können Sie den Pfeileffekt erzielen, indem Sie dessen Rand festlegen und umdrehen.
Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.
Empfohlen: „CSS-Video-Tutorial“
Wie schreibe ich Pfeile mit CSS3?
Sie können das Transformationsattribut in CSS3 verwenden, um zunächst ein kleines, ohne Hintergrund gefülltes Quadrat zu implementieren, seinen Rand festzulegen, es umzudrehen und dann den Pfeil zu implementieren.
Schauen wir uns das folgende Beispiel an:
<style>
.left{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-135deg);
}
.right{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(45deg);
}
.top{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-45deg);
}
.bottom{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(135deg);
}
</style>
</head>
<body>
<div class="left"></div>
<hr>
<div class="right"></div>
<hr>
<div class="top"></div>
<hr>
<div class="bottom"></div>
</body>Rendering:
Das obige ist der detaillierte Inhalt vonWie schreibe ich einen Pfeil mit CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!