Стрелки с помощью CSS

<div class="arrow down"></div>
    

<div class="arrow up"></div>
    

<div class="arrow left"></div>
    

<div class="arrow right"></div>
    

.arrow{
  width: 0px;
  height: 0px;
  border: 50px solid transparent; 
  border-top-color: red; 
  margin: 0;
  padding: 0;
  float: left;
}
.arrow:before{
  content:'';
  width: 0px;
  height: 0px;
  border: 30px solid transparent; 
  border-top-color: white;
  display: inline-block;
  -webkit-transform: translate(-30px, -50px);
}
.arrow.left{
  transform: rotate(90deg) translate(0px, 25px);
  -webkit-transform: rotate(90deg) translate(0px, 25px);
  -moz-transform: rotate(90deg) translate(0px, 25px);
  -o-transform: rotate(90deg) translate(0px, 25px);
  -ms-transform: rotate(90deg) translate(0px, 25px);
}
.arrow.down{
  transform: rotate(0deg) translate(0px, 25px);
  -webkit-transform: rotate(0deg) translate(0px, 25px);
  -moz-transform: rotate(0deg) translate(0px, 25px);
  -o-transform: rotate(0deg) translate(0px, 25px);
  -ms-transform: rotate(0deg) translate(0px, 25px);
}
.arrow.up{
  transform: rotate(180deg) translate(0px, 25px);
  -webkit-transform: rotate(180deg) translate(0px, 25px);
  -moz-transform: rotate(180deg) translate(0px, 25px);
  -o-transform: rotate(180deg) translate(0px, 25px);
  -ms-transform: rotate(180deg) translate(0px, 25px) translate(0px, 25px);
}
.arrow.right{
  transform: rotate(270deg) translate(0px, 25px);
  -webkit-transform: rotate(270deg) translate(0px, 25px);
  -moz-transform: rotate(270deg) translate(0px, 25px);
  -o-transform: rotate(270deg) translate(0px, 25px);
  -ms-transform: rotate(270deg) translate(0px, 25px);
}