附加到 div 的 Bootstrap 箭头

总的来说，我对引导程序和前端框架非常陌生。但是，我能够注意到使用 bootstrap 的网站的共同特征。下图包含我发现在引导网站中非常普遍的东西。指向其下方文本的向下（或任何方向）蓝色箭头也是我所指的。

我使用 firebug 检查了这些元素，发现它与.hero-unit div.

它到底是如何工作的以及如何实现的？

它不是引导程序的标准配置，但是这是一篇好文章 http://davidwalsh.name/css-triangles关于如何做:after我相信这就是您正在寻找的。

Demo http://jsfiddle.net/SchmalzyB/e53UH/4/

.hero:after {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    content:'';
    width: 0;
    height: 0;
    border-top: solid 10px #e15915;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

通过调整三角形可以使三角形变大或变小border-*属性，还有 margin-left(border * -1)。