三角形のCSSアクティブメニュースタイルとは何ですか？

次の図では、私はCSSのアクティブなメニュースタイリングを参考にしています。三角形のCSSアクティブメニュースタイルとは何ですか？

Triangle active menu

あなたは、アクティブなメニューを強調三角形がある気づくでしょう、そしてそれはあまりにも大胆表示されます。

質問1.この「アクティブメニュー三角形」は実際には何と呼ばれていますか？だから私はそれのCSSの例を見つけることができます。

質問2.この例はどこにありますか？

出典

2010-12-11 zardon

BBCのiPlayerはこの効果がありますが、私は彼らがどのようにしたのか分かりません。単なる一連の画像だと思います。しかし、どちらの方法でも、次の回答が非常に役に立ちました。 – zardon

：

HTML

<ul> 
    <li><a href="#">Menu Item 1</li> 
    <li><a href="#" class="selected">Menu Item 2</li> 
    <li><a href="#">Menu Item 3</li> 
    .... 
</ul>

CSS

ul li a {padding: 6px; border-bottom: 1px solid #666; background-image: none; color: #454545} 

ul li a.selected { background: #fff url(triangle.png) no-repeat center bottom}

それは国境をぴったりと収まるまで、バックグラウンド位置を微調整。

出典

2010-12-11 14:32:31 Timbadu

私はそれがどのように呼び出されているのかわかりませんが、それはどのCSSプロパティにも対応していないと思います。あなたは私が思う背景画像でこれを達成しなければなりません。

出典

2010-12-11 13:02:37 greg0ire

私はそこに名前はないと思っていますが、背景画像を追加することなくCSSでこれを作るのは難しいでしょう。画像はかなり簡単です。他のコメントを見てください。

もちろん、このような矢印をシミュレート要素、作成するために、いくつかのCSS3のトリックと:afterを使用することができます。

http://jsfiddle.net/upeRE/2/

をしかし、それはすべてのブラウザでは動作しません、あなたが知っておく必要があるだろうあなたのメニュー項目がどれくらい広いか。すべてのそのようCSSクラスを介して行わ

出典

2010-12-11 14:14:53

誰かが興味を持っている、または追加している場合、私がここで私のブログで行ったことを説明しました：http://www.stephanmuller.nl/css3-active-menu-item-triangle/ –

ありがとう。 Upvoted。 – zardon

cssの三角形のメニュー（またはcss3の三角形）を探す必要があります。これらは透明な罫線で作成されています。あなたがここに三角形を作ることができる方法の良い説明があります：

http://jonrohan.me/guide/css/creating-triangles-in-css/

出典

2012-04-03 16:01:06 piatek

形状はCSSのポリゴンと呼ばれています。 Tantek Celikは、2001年のこの技術について最初に書きました。デザインパターンは、location-based breadcrumbと呼ばれています。

出典

2012-04-05 21:17:36

三角形のCSSアクティブメニュースタイルとは何ですか？

答えて

関連する問題