CSS3で実現するアローアイコン

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

[mura24]

[smartphone : dev]

[tsetgogo]

CSS3で実現するアローアイコン

[think49]

これは面白い。L字型 border を transform で45度回転させる事で矢印「＞」を表現するテクニック。

[dal]

実用。

[lotus_tribal]

画像使うとズレたりしますしね。こっちのがいいのかな。 // CSS3で実現するアローアイコン - to-R

[oppara]

CSS3で実現するアローアイコン - to-R

[primedesignworks]

これ http://webiconfonts.appspot.com/ 使ったらいいのに

[yamadar]

transformプロパティで回転させる。

[otchy210]

CSS を駆使して図形を書くのって本質なのかなぁ？という疑問は常にある。こういう簡単なアイコンの場合、最近の好みは background-image: url(data:image/png;base64,xxxxx) かな。よく使うものをストックしておくと良い。

[sononon]

お、岩田さんがやろうとしてたやつだ

[warriorking]

CSS3で実現するアローアイコン - to-R

[XIAORING]

arrow icon link list

[kenjou]

φ(｀д´)ﾒﾓﾒﾓ...

[trashtoy]

transformとかborder-radiusとかを使って複雑な図形をCSSで表現している例をよく見かけるけど、将来的にはCSS上でSVGが書けたり出来るようになるのが理想的かも。

[emj1025]

矢印をcssで

[sho_yamane]

メモ

[tsuki-rs]

なるほどぉ！！勉強になります！

[mingos]

画像を使わないでアローアイコン付きのリストを作る方法