在Twitter Bootstrap上的插入符号是如何构造的

Question

这与其说是我需要知道的事情，不如说是一个好奇的问题。

本页:

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

小插入符号/向下箭头是如何构造的?在Firebug上四处看看，它看起来像是用透明的边框制作的，但是……我一定是错过了什么。

Bootstrap非常酷。我刚开始用Symfony

Answer 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 magazine文章关于:before and:after

Answer 2

下面是一个向上插入符号的CSS，基于bootstrap:

.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: "";
}