CSS3：矢印をつくる

まず表示サンプルはこちら。
http://jsdo.it/goto_jp/d6t7

下記のただのdivがあるとします。

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

下記CSSでクラス「arrow」をつくります。

.arrow {
  width:20px;
  height:20px;
  border-top: solid 2px #0c9;
  border-right: solid 2px #0c9;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

2辺だけborderを設定した箱を、CSS3のtransformで45度回転させているのがCSS矢印の正体です。