Strzałki w css

Serdecznie zapraszam na stronę fotoRAF – moje fotografie z ofertą dotyczącą fotografii.

Nieraz potrzebujemy na swojej stronie dodać strzałkę typu „up” lub „down”. Można wstawić obrazek ale niekoniecznie musi być to jedyne rozwiązanie. W tym celu możemy wykorzystać CSS.

Przykładowy kod do wstawienia na stronie dla strzałki do góry:

<div id="top"></div>

Wykorzystując poniższą definicję w pliku css otrzymamy strzałkę:

#top {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid rgba(198, 0, 0, 0.8);
}

Jako wynik otrzymamy strzałkę taką jak ta poniżej:

Gdybyśmy jednak zechcieli inne strzałki to trzeba posłużyć się poniższym kodem

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

Strzałki uzyskamy przy pomocy poniższego kodu (tutaj LESS;)):

@arrow-color: rgba(255,0,0,0.3);
@arrow-length: 25px;
@arrow-width: 20px;

.mixin-size {
  width: 0;
  height: 0;
}

#top {
  .mixin-size;
  border-left: @arrow-width/2 solid transparent;
  border-right: @arrow-width/2 solid transparent;
  border-bottom: @arrow-length solid @arrow-color;
}

#right {
  .mixin-size;
  border-top: @arrow-width/2 solid transparent;
  border-bottom: @arrow-width/2 solid transparent;
  border-left: @arrow-length solid @arrow-color;
}

#bottom {
  .mixin-size;
  border-left: @arrow-width/2 solid transparent;
  border-right: @arrow-width/2 solid transparent;
  border-top: @arrow-length solid @arrow-color;
}

#left {
  .mixin-size;
  border-top: @arrow-width/2 solid transparent;
  border-bottom: @arrow-width/2 solid transparent;
  border-right: @arrow-length solid @arrow-color;
}

Po przekompilowaniu do CSS:

.mixin-size {
  width: 0;
  height: 0;
}
#top {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid rgba(255, 0, 0, 0.3);
}
#right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 25px solid rgba(255, 0, 0, 0.3);
}
#bottom {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 25px solid rgba(255, 0, 0, 0.3);
}
#left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 25px solid rgba(255, 0, 0, 0.3);
}