jquery - 根据链接的宽度在每个链接菜单的底部添加三角形

Question

我正在将一个 psd 菜单转换为基于 css 的菜单。在下面找到原始的psd设计

我的工作没有三角形。

我的问题是根据链接的宽度添加三角形

我的html

    <div class="navbar-collapse collapse menu pull-right">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                     ABOUT US
                    </a>
                </li>
                <li>
                    <a href="#">
                    PRODUCTS
                    </a>
                </li>
                <li>
                    <a href="#">
                      Portfolio
                    </a>
                </li>
                <li>
                    <a href="#features-listing">
                       HR Service
                    </a>
                </li>
                <li>
                    <a href="#offers">
                      Contact
                    </a>
                </li>
            </ul>
        </div>
    </div>

css（引导程序的帮助）

                .menu ul > li > a {
                padding: 63px 18px 31px;
                color: #000;
                font-weight:bold;
            }
            .menu ul > li > a:hover {
                background: #2390D5;
                color: #fff !important;
            }
            .menu ul li a {
                transition: border 150ms ease-in-out 0s, background-color 150ms ease-in-out 0s;
            }
            .menu .active {
                background: #2390D5;
            }
            li.active a {
                color: #fff !important;
            }

Answer 1

一种方法是使用边框来生成三角形

<div class="arrow-down"></div>

.arrow-down {
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 24px solid #00f;
}

示例小提琴

ps 我将链接的所有宽度设置为相等，以使其能够像这样工作

Answer 2

您是否尝试将背景图像添加到您的 li 元素？如果背景包含正确的图像并设置为拉伸它应该为您提供所需的输出。

我希望你知道我的意思:) 我知道这是一种 hack，但如果你没有想出其他任何东西，这应该可以工作..