如何构建TwitterBootstrap上的插入符号？-HowisthecaretonTwitterBootstrapconstructed?

33  

It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.

它只有边界。当你看到这样的箭头时，开发人员很可能使用伪元素来创建它们。基本上发生的是你创建一个没有内容的透明盒子，因为那里什么都没有，你看到的只是边界的一角。这方便地看起来就像一个箭头。

How to do it:

怎么做：

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

http://jsfiddle.net/fGSZx/

http://jsfiddle.net/fGSZx/

Here are some resources to help:

以下是一些可以帮助的资源：

CSS Triangle from CSS-Tricks (this should clear everything up)

来自CSS-Tricks的CSS Triangle（这应该清除所有内容）

Smashing Mag article about :before and :after

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

4  

Here is the CSS for an upward facing caret, based on the CSS from bootstrap:

这是一个面向上的插入符号的CSS，基于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: "";
}