14

これは、私が本当に知りたいことというよりも、好奇心の問題です。

このページでは:

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

小さなキャレット/下向き矢印はどのように構成されていますか? Firebugをいじってみると、透明な境界線で作られているように見えますが...何かが足りないに違いありません。

ブートストラップはとてもクールです。Symfonyでうまくいきました。

4

2 に答える 2

33

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

どうやってするの：

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

http://jsfiddle.net/fGSZx/

役立つリソースを次に示します。

CSS-Tricks の CSS Triangle (これですべてがクリアになるはずです)

:before と :after に関する Smashing Mag の記事

于 2013-01-18T18:10:26.650 に答える
4

ブートストラップの 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: "";
}
于 2013-09-19T20:06:14.307 に答える