问

附加到div的Bootstrap箭头

一粒小小无名砂_741 发布于 2023-02-06 10:23

bootstrap

图片

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

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

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

向下箭头

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

2023-02-06 10:26 回答

黄力2502860237_367

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签