矢印の作り方

不等号の使用

＞（大文字）
>（小文字）

transformとborderを使用する

widthとheightの半分のネガティブマージンを指定するのがポイントらしい。

<!--html-->
<p class="b3">
<i class="icoRight"></i><br />
<i class="icoLeft"></i>
</p>

/*css*/
.icoRight,
.icoLeft {
	display:block;
	width:12px;height:12px;
	margin-top:-6px;
	border-top:solid 3px #f44;
	border-right:solid 3px #44f;
	}
.icoRight {
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	}
.icoLeft {
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	}

• Menu1
• Menu2
• Menu3

リストメニューに対して矢印を擬似要素（after）を使って配置。afterだからz-indexとかなくて平気。

<!--html-->
<ul class="nav1">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>

/*css*/
.nav1 {
	list-style-type:none;
	font-size:20px;
	}
.nav1 li:first-child {
	border-top:none;
	}
.nav1 li {
	border-top:solid 1px #fff;
	}
.nav1 li a {
	width:200px;
	display:block;
	font-weight:bold;
	background:#aaf;
	text-align:center;
	text-decoration:none;
	color:#fff;
	transition:background .8s;
	-webkit-transition:background .8s;
	position:relative;
	}
.nav1 li a:hover {
	background:#f44;
	}
.nav1 li a:after {
	position:absolute;
	top:50%;
	right:8%;
	margin-top:-5px;
	display:block;
	content:"";
	width:10px;height:10px;
	border-top:solid 2px #fff;
	border-right:solid 2px #fff;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	}

アイコンフォントを使用する

transformやfirst-childはIE8以下は使えず、transitionはIE9以下は使えない。media queriesも8以下使えなかったんだ。まぁそういう時に使う感じ。

/*html*/
<link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello.css">
<link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello-ie7.css">
<i class="icon-right-open"></i><br />
<i class="icon-angle-right"></i>

参考：56doc

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>