2007年4月22日日曜日

 

CSSで横三角。「半キャラずらし」

今回はお題の通りインターネット帳面でもやってる「CSSで横三角をやる方法」。2バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。

それを画像を使わずに実現する方法。

サンプル

言葉で言うと「◆を半分隠す」だけ。

意外と不自然にならない。text-indentとかmarginとかで左半分を隠している。
詳しくは参照元を。
ただbefor要素を使っているのでIEだと見れません。

ふつうに横三角

参考までに、ふつうの横三角のコードも書いておきますね!
    » (»)
    « («)

    ▷ (▷)
    ▶ (▶)
    ◁ (◁)
    ◀ (◀) 
そうそう、この中でも &raquo; って結構使えるよ! よくサイドのメニューとかで、CSS を使って <li> の背景左端に、右向き三角っぽい画像を設定したりするよね!

IEでもFirefoxでも大丈夫なようだけど、OSが変わっても大丈夫なのか?


ul {
  list-style:none;
}
ul li{
  overflow:hidden;
}
ul li a{
  margin-left:-0.5em;
}

サンプル

一つ目の方法を、IEでもFirefox大丈夫なように。

結局、リストのひとつひとつに&raquo;&#x25B6;と書かなくてはいけないのは個人的に意味ない気もする。ブラウザ依存はもっとダメだけど

参考

インターネット帳面
http://ima.pandach.com/
ぼくはまちちゃん!
http://d.hatena.ne.jp/Hamachiya2/

ラベル: ,


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google