Как добавить треугольник над дропдауном на bootstrap2?

Question

[naneri]

Необходимо над выпадающим меню добавить треугольник как на этом скриншоте.

Как это сделать?

Answer 1

[Roman Zhak]

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

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}

e.g.: jsfiddle.net/p9Dw6/1

Answer 2

[Anton Yatsenyuk]

.block-class:before {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}

Answer 3

[Юрий Лобанов]

Он там и так есть. Смотрите, возможно что-то не так делаете.
В общем-то Вы можете по ссылке getbootstrap.com/2.3.2/javascript.html#dropdowns посмотреть, как он реализован в bootstrap, на случай, если Вы там что-то меняли.

Comments

[naneri]

Вроде бы у меня тот же код, но дропдауна треугольника нет :(, что тока не пробовал...

[Юрий Лобанов]

@naneri ну так приведите код ) Или киньте ссылку на свой сайт

[naneri]

@iiil сегодня вечером залью на хостинг и ссылку кину тада

[naneri]

@iiil - проблема в том что я когда навожу на псевдоэлемент ::before в консоли, хром мне указывает его местоположение верно, но он при этом невидим :(

[Юрий Лобанов]

@naneri Вы пример давайте, разберемся ) Можно конечно сделать как пишут выше, но не советую лепить что-то, не разобравшись, почему не работают стандартные вещи.

[naneri]

@iiil devzone51.com/kyrgyz вот тут находится версия в разработке. Надо залогиниться и там прям вверху в шапке - оранжевые дропдауны должны быть с треугольниками.

[Юрий Лобанов]

@naneri посмотрите внимательно по ссылке. Треугольник есть только у навбара (Within a navbar), то есть должен быть класс navbar, а у Вас я его не вижу. Сначала добавьте его.

[naneri]

@iiil это я вчера видимо игрался, свойство оставил, а названия классов которые добавил - удалил. Надо это класс к элементу <ul>
добавить?

[Юрий Лобанов]

@naneri посмотрите внимательно структуру по ссылке. К псевдоэлементу before стиль присваивается так: .navbar .nav > li > dropdown-menu:before.
.nav > li > dropdown-menu у Вас есть, так что родителю присвойте класс navbar. Вроде бы у Вас там был родитель с классом hide-telephone или как-то так. Вот ему попробуйте дописать класс navbar.
Не факт что это поможет, но с этого надо начать

[naneri]

@iiil кстати там класс я добавлял - mydropdown спецом для треугольников

[naneri]

@iiil - появились ::befor и ::after, но опять невидимые :(