CSS Arrow

CSS

Arrow

<div class="up"></div>
<div class="down"></div>
<div class="left"></div>
<div class="right"></div>

div {
 margin: 10px;
}
.up {
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 5px solid pink;
}

.down {
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 5px solid pink;
}

.right {
 width: 0;
 height: 0;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid pink;
}

.left {
 width: 0;
 height: 0;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-right: 5px solid pink;
}

Result