附加到div的Bootstrap箭头

Question

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

我用萤火虫检查元素,发现它与.hero-unitdiv 有关.

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

Answer 1

它不是引导程序的标准,但这是一篇很好的文章,关于如何处理:after我相信你正在寻找的东西.

演示

.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-*属性以及左边距(边框*-1)来使三角形变大和变小.