css - 附加到 div 的 Bootstrap 箭头

Question

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

我使用 firebug 检查元素，发现它与 .hero-unit div 相关。

这究竟是如何工作的以及它是如何完成的？

Answer 1

它不是 Bootstrap 的标准配置，但 Here is a good article关于如何处理 :after我相信这就是您要找的。

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-* 使三 Angular 形变大或变小属性，还有 margin-left(border * -1)。