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

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（bootstrap的帮助）

                .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;
}

示例fiddle

p.s我将链接的所有宽度设置为相等，以便允许它像这样工作

Answer 2

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

我希望你知道我的意思:) 我知道这有点像黑客，但如果你没有提出任何其他的东西，这应该有用..