Twitter上的插入符号是如何构建的？ [英] How is the caret on Twitter Bootstrap constructed?

问题描述

这是一个好奇心的问题，而不是我真正需要知道的东西。

This is more of a curiosity question than something I really need to know.

在这个页面上：

http://twitter.github.com/bootstrap/components.html#button下载

小插图/下箭头如何构造？使用Firebug，看起来它只是用透明的边框，但...我一定是缺少的东西。

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.

Bootstrap是很酷。

Bootstrap is very cool. I just got it going with Symfony.

推荐答案

它只有边框。当你看到这样的箭头时，开发者最可能使用伪元素来创建它们。基本上发生什么是你创建一个没有内容的透明框，并且由于没有什么，所有你看到的是边框的一角。

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.

如何操作：

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

http://jsfiddle.net/fGSZx/

这里有一些资源可以帮助：

Here are some resources to help:

CSS-Tricks中的CSS三角形（应清除所有内容）

Smashing Mag article about：before and：after

这篇关于Twitter上的插入符号是如何构建的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！