Как поставить чёрточку между кнопками меню?

Question

[Super Star]

Я не пониманию откуда она берётся там. Я смотрел аналогичные меню, но так и не понял как это сделать.

Само меню получилось:



Но как добавить эту чёрточку?

Answer 1

[HamSter]

border + box-shadow

пример

либо если использовать изображение, то так

Comments

[Super Star]

у меня вышло https://jsfiddle.net/hngLudrg/9/, но последнему элементу не могу сделать полоску. Даже с .main_mnu li:last-of-type {} как посоветовали выше

[HamSter]

Андрей Рысь: поправила ответ

[Super Star]

HamSter: Спасибо огромнейшее

[HamSter]

Андрей Рысь: вместо спасибо можно просто отметить вопрос решением или лайком))) и пожалуйста)

Answer 2

[Ankhena]

Если в Ваших формулировках, то дописать:

.main_mnu ul li:last-child {
  background: url(http://s019.radikal.ru/i644/1608/2b/4dc09f3ee992.png)  no-repeat right center, url(http://s019.radikal.ru/i644/1608/2b/4dc09f3ee992.png)  no-repeat left center

}

https://jsfiddle.net/ahjpq35y/

А по хорошему, конечно, разобраться с тенями и бордерами или градиентами, а не картинками.

Comments

[Super Star]

Огромное спасибище

[Super Star]

Ankhena W: отметил

Answer 3

[Максим Тимофеев]

border не подходит по религиозным причинам?

Comments

[Super Star]

Делал, но она с виде не получается такой глубокой. просто полоса, как добавить глубины?

[Максим Тимофеев]

Андрей Рысь: тенью (box-shadow), можно картинку на бордюр поставить, можно c помощью псевдоэлементов :after

[Super Star]

border-image чо всех сторон обтекает, я не нашел чтобы только с определённой стороны

[Максим Тимофеев]

Андрей Рысь: stackoverflow.com/questions/10996380/top-border-im...

[Максим Тимофеев]

Андрей Рысь:

border-image:url(); border-bottom:0;
border-top:0;

[Super Star]

Максим Тимофеев: У меня почти получилось https://jsfiddle.net/hngLudrg/9/ только у последнего элемента не знаю как добавить

[Максим Тимофеев]

Андрей Рысь: .main_mnu li:last-of-type {}

Answer 4

[Дмитрий Антонов]

https://jsfiddle.net/hngLudrg/10/
Пользуйтесь

Answer 5

[Nikita Shchypylov]

Это похоже на картинку .png. Она вставляется урлом и идет background-position:left или right

Comments

[Super Star]

Да у меня вышло https://jsfiddle.net/hngLudrg/9/, но последнему элементу не могу сделать полоску. Даже с .main_mnu li:last-of-type {} как посоветовали выше