顶部有三角形的Megamenu

Question

我正在使用带有大型菜单下拉菜单的 bootstrap v4.4.1 导航栏。

我想在下拉菜单的顶部添加一个三角形。我已经找到了如何添加三角形的方法，但是我无法在父nav-link中将三角形居中，而无法通过mega菜单和/或下拉菜单居中。关于如何使三角形相对于父元素居中有任何想法吗？

    .dropdown-menu::before {
        border-bottom: 10px solid #002a54;
        border-left: 10px solid rgba(0, 0, 0, 0);
        border-right: 10px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        left: 50%;
        position: absolute;
        bottom: -12px;
        
    }

Answer 1

恐怕如果您想将traignle与父项.nav-link居中，则可能需要稍微改变样式。想法是将.nav-link的位置设置为相对，并将其:before设置为三角形并将其位置设置为绝对。

Megamenu布局

<div class="collapse navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item dropdown mega">
            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" />
            <div class="dropdown-menu">
                <div class="mega-content">
                    <div class="container-fluid">
                        ...
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

三角形样式

在:before上使用它而不是.dropdown-menu上的.dropdown-toggle。另外，我仅在打开下拉菜单时才设置样式。

.dropdown.mega.show .dropdown-toggle {
    position: relative;
}

.dropdown.mega.show .dropdown-toggle:before {
    border-bottom: 10px solid #002a54;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    width: 0;
    height: 0;
    content: "";
    display: inline-block;
    left: calc(50% - 10px);
    position: absolute;
    bottom: -.5rem;        // .5rem is just the padding of the toggler
}

我在:before上使用了:after而不是.dropdown-toggle，因为已经在:after上设置了另一个三角形/插入符号。如果需要，可以用原始文件覆盖原始文件，或者更好的是，仅在打开下拉菜单时显示原始文件。

居中的棘手部分是计算left偏移量。

由于您使用10px边界宽度构造了三角形，并且希望三角形的中心点为宽度的50％，所以左偏移量仅为50% - 10px：

屏幕截图

https://jsfiddle.net/davidliang2008/to7uns64/36/

演示： Jakob S suggested in his answer