よく使うのですが、たまにどうやるのか忘れてしまうので、メモ用に書いておきます。
ここからコピペできるようにいろんな矢印を追加していきます。
CONTENTS
いろんな矢印
よくみる矢印

完成コード
HTML
<div class="arrow"></div>
CSS
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
border-color: transparent transparent #333 #333;
transform: rotate(-45deg);
}

手順1
まず、ハコ(div)幅や高さを決めて、正方形をつくる。
そのハコをborderで囲む。
CSS
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
}

手順2
次にborder-colorというCSSをあてる。
2辺だけを表示するため、いらないところはtransparentで透明にする。順番は時計周り。
border-color: transparent(上) transparent(右)
#333(下) #333(左)
この色を変更することで矢印の色が変えられる
CSS
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
border-color: transparent transparent #333
#333;
}

手順3
最後に、くるっと回転させて完成!
rotate(-45deg)の角度を変えることで矢印の向きが変えられる。
CSS
.arrow {
width: 30px;
height: 30px;
border: 2px solid #333;
border-color: transparent transparent #333
#333;
transform: rotate(-45deg);
}