Добавление треугольника в нижней части каждого меню ссылки в соответствии с шириной ссылки

0

Я конвертирую одно меню psd в меню css. Найдите оригинальный дизайн psd ниже

Изображение 174551

Моя работа выполняется без треугольника.

моя проблема заключается в добавлении треугольника в соответствии с шириной ссылки Изображение 174551

Мой 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;
            }
  • 0
    Насколько я знаю, вы можете использовать только определенные значения пикселей для границ псевдоэлементов, и значения% не будут работать ... так что это не так. Возможно, SVG ... хм.
  • 0
    Довольно просто, используя границы.
Показать ещё 4 комментария
Теги:

2 ответа

2

Один из способов сделать это - использовать границы для создания треугольника

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

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

Пример скрипки

ps Я устанавливаю все ширины ссылок равными, чтобы он мог работать так

Поделиться
1

Вы пытались добавить фоновое изображение к своим ли элементам? Если фон содержит правильное изображение и настроен на растяжение, он должен предоставить вам требуемый результат.

Надеюсь, вы знаете, что я подразумеваю под этим :) Я знаю, что это взломать, но если вы ничего не придумаете, это должно сработать.

Поделиться
  • 0
    Фоновое изображение это путь. Я пытался создать треугольники в чистом CSS с использованием контента: после и границ, но вы не можете использовать% измерений для этих элементов. Должен быть способ сделать это с помощью функции js, но для этого потребуется больше кода.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню