Twitter Bootstrapのキャレットはどのように構築されていますか？

Question

これは私が本当に知る必要があるものよりも好奇心の質問です。このページ

：

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

は、どのように少しキャレット/下矢印事が構築されますか？ Firebugを使って周りを覗いてみると、それは透明な境界で作られているように見えますが...私は何かが欠けているに違いありません。

ブートストラップはとてもクールです。私はちょうどそれをSymfonyに持ってきました。

Answer 1

ボーダーのみです。このような矢印が表示されると、開発者は疑似要素を使用してそれらを作成する可能性が非常に高いです。基本的に何も起こらないのは、コンテンツなしで透明なボックスを作成することです。そこには何もないので、表示されるのは境界線の1つのコーナーだけです。これは、便利に矢印のように見えます。それを行うにはどのように

：ここ

.foo:before { 
    content: ' '; 
     height: 0; 
     position: absolute; 
     width: 0; 
     border: 10px solid transparent; 
     border-left-color: #333; 
} 

http://jsfiddle.net/fGSZx/

を助けるためにいくつかのリソースです：

CSS Triangle from CSS-Tricks（これはすべてをクリアする必要があります）。ここ

Smashing Mag article about :before and :after

Answer 2

ブートストラップからのCSSに基づいて上向きのキャレットのCSSです：

.caret-up { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-top: none; 
    border-bottom: 4px solid #FFFFFF; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    border-top-width: 0px; 
    border-top-style: dotted; 
    content: ""; 
}