css - 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-Tricks 中的 CSS 三角形（这应该可以清除所有内容）

关于 :before 和 :after 的 Smashing Mag 文章

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