这更多的是一个好奇问题,而不是我真正需要知道的事情。
在本页面:
http://twitter.github.com/bootstrap/components.html#buttonDropdowns 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/ http://jsfiddle.net/fGSZx/
以下是一些可以提供帮助的资源:
CSS-Tricks 中的 CSS 三角形 http://css-tricks.com/snippets/css/css-triangle/(这应该清除一切)
Smashing Mag 文章:之前和之后 http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)