css – 附加到div的Bootstrap箭头

我对bootstrap和前端框架非常陌生.但是,我能够注意到使用bootstrap的站点具有共同特征.下面的图片包含我发现在引导程序站点中非常普遍的东西.指向其下方文本的向下(或任何方向)蓝色箭头也是我所指的.

我用firebug检查元素,发现它与.hero-unit div有关.

这究竟是如何工作的以及如何实现的？

它不是标准的bootstrap,而是 Here is a good article如何处理：之后我相信你正在寻找.

Demo

.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),可以使三角形变大和变小.