CSS Twitter Bootstrap 上的插入符号是如何构造的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14404923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How is the caret on Twitter Bootstrap constructed?
提问by tetranz
This is more of a curiosity question than something I really need to know.
这更像是一个好奇的问题，而不是我真正需要知道的事情。
On this page:
在本页：
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.
小插入符号/向下箭头是如何构造的？用 Firebug 四处逛逛，看起来它只是用透明边框制作的，但是......我一定错过了一些东西。
Bootstrap is very cool. I just got it going with Symfony.
Bootstrap 非常酷。我刚刚用 Symfony 搞定了。
回答by Jason
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;
}
Here are some resources to help:
以下是一些可以提供帮助的资源：
CSS Triangle from CSS-Tricks(this should clear everything up)
CSS-Tricks 中的 CSS Triangle（这应该清除一切）
回答by Ryan H
Here is the CSS for an upward facing caret, based on the CSS from bootstrap:
这是基于 bootstrap 的 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: "";
}
