如何构建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 Triangle(这应该清除所有内容)

Smashing Mag文章:关于:之前和之后