css – 如何构建Twitter Bootstrap上的插入符号?

前端之家收集整理的这篇文章主要介绍了css – 如何构建Twitter Bootstrap上的插入符号?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这比我真正需要知道的更多是一个好奇的问题.

在此页面上:

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

小插槽/向下箭头的构造如何?围着Firebug来看,它看起来像是透明的边框,但是…我一定是错过了一些东西.

Bootstrap非常酷.我刚刚和Symfony一起去了.

解决方法

它只有边界.当您看到这样的箭头时,开发人员最有可能使用伪元素来创建它们.基本上发生的是你创建一个没有内容的透明框,并且由于没有任何内容,所以你看到的只是边框的一个角落.这很方便地看起来像一个箭头.

怎么做:

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

http://jsfiddle.net/fGSZx/

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

CSS Triangle from CSS-Tricks(这应该清除一切)

Smashing Mag article about :before and :after

猜你在找的CSS相关文章