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

Question

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

我的工作没有三 Angular 。

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

我的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

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

<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 我将所有链接的宽度设置为相等，以便允许它像这样工作