CSS3:矢印をつくる

goto_jp 3,647views 更新:2014年2月5日

まず表示サンプルはこちら。
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矢印の正体です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません