Twitter Bootstrap中的插入符号是如何构建的？

Question

这更像是一个好奇问题，而不是我真正需要了解的内容。

在这个页面上：

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

小的插入符号/向下箭头是如何构造的？通过使用Firebug探索，看起来它只是由透明边框制成的，但是...我一定漏掉了什么。

Bootstrap非常酷。我刚刚将其与Symfony结合使用。

- tetranz

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三角形 （这应该解决一切问题）

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

- Jason

---

谢谢。即使我读了第二个链接，也花了一段时间才明白。我之前没有意识到一个显而易见的事实：当边框在一个角落相遇时，它们的边缘会被以45度的角度切割，这样它们就可以拼合在一起而不会重叠。这里有另一个链接，里面有更多的技巧。 http://jonrohan.me/guide/css/creating-triangles-in-css/ - tetranz

有人在Github页面上提出了一个关于更改插入符号的问题，这为您提供了一些来自TW-BS作者的背景信息。 - tatlar

希望大家都看过这篇辉煌的文章。https://dev59.com/Ymw05IYBdhLWcg3wuUAL - approxiblue

Answer 2

以下是基于Bootstrap的向上箭头的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: "";
}

- Ryan H