Wie man erstellt: CSS-Pfeile

Lernen Sie, wie man mit CSS Pfeile erstellt.

Nach rechts zeigender Pfeil:

Nach links zeigender Pfeil:

Nach oben zeigender Pfeil:

Nach unten zeigender Pfeil:

Wie man Pfeile erstellt

Erster Schritt - HTML hinzufügen:

<p>Nach rechts zeigende Pfeil: <i class="arrow right"></i></p>
<p>Nach links zeigende Pfeil: <i class="arrow left"></i></p>
<p>Nach oben zeigende Pfeil: <i class="arrow up"></i></p>
<p>Nach unten zeigende Pfeil: <i class="arrow down"></i></p>

Zweiter Schritt - CSS hinzufügen:

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
{}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
{}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
{}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
{}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
{}

Try it yourself