Я конвертирую одно меню 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;
}
Один из способов сделать это - использовать границы для создания треугольника
<div class="arrow-down"></div>
.arrow-down {
border-left: 24px solid transparent;
border-right: 24px solid transparent;
border-top: 24px solid #00f;
}
Пример скрипки
ps Я устанавливаю все ширины ссылок равными, чтобы он мог работать так
Вы пытались добавить фоновое изображение к своим ли элементам? Если фон содержит правильное изображение и настроен на растяжение, он должен предоставить вам требуемый результат.
Надеюсь, вы знаете, что я подразумеваю под этим :) Я знаю, что это взломать, но если вы ничего не придумаете, это должно сработать.