CSS3で実現するアローアイコン
スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。
ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら)
まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。
<ul>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#">link</a></li>
<ul>
.arrowには以下のようなCSSを指定します。
li a.arrow{
position: relative;
}
li a.arrow::after{
content:"";
display: block;
width:10px;
height:10px;
border-top:4px solid #333;
border-right:4px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right:10px;
top:50%;
margin-top:-7px;
}
a要素にはposition:relativeを指定し作成するアローアイコンを自由に配置できるようにします。
a要素のafter擬似要素を利用しアローアイコンを描画する要素を生成します。contentプロパティで縦10px横10pxの矩形を作成し、border-topとborder-rightで4pxのボーダーを指定します。これをCSS3のtransformプロパティを利用し45度回転させます。最後にposition:absoluteでリストの右側に表示されるように位置調整します。
覚えておくとスマホサイトで非常に役立つテクニックですので、知らない方はぜひ覚えておいてください。
参考:スマホでタップできることを示すアイコンなどをCSSのみで実装してみましょう | clear sky source
関連エントリー
CSS3アニメーションを利用したサンプル
CSS3でセレクトボックスをカスタマイズ
知っておきたい15個のCSS TIPS
クロスフェードを実現するCSS4のcross-fade()
レスポンシブイメージを実現するCSS4のimage-set