Как реализовать такую волнистую линию у навбара?

Question

[Benajmin Smith]

Приветствую. Вопрос к верстальщикам. Как реализовать такую волнистую линию у навбара? ?
yadi.sk/d/O-jBE1_QJw4ky

Answer 1

[Иван Старков]

:-)
background-image: url(images/bg_частьволны.png);
background-position: left bottom;
background-repeat: repeat-x;
}
накладывать на картинку элемент с таким стилем по ширине картинки
bg_частьволны.png - кусок волны равный периоду

Answer 2

[Анна Бакурова]

то что сказал icelaba + не забудьте поставить у нижнего блока отрицательный margin(равный высоте картинки волны) и z-index меньше (это при условии, если та картинка на которую находит эта волна не фон самого сайта, а фон блока).

Answer 3

[Игорь Доминатор]

вырезать кусок волны скажем 10px в высоту и ширину.

width: 100%;
background: url("images/изображение.png") repeat;
height: 10px;
position: relative;

и все)

Answer 4

[Иван Старков]

вы можете это сами посмотреть в developer tools хрома
вот он
box-shadow: 0 0 0 1px #becdd8,0 0 8px rgba(0,0,0,0.1);

Comments

[Benajmin Smith]

т.е это box-shadow ? я так понял будет только в хроме отображаться? а как реализовать в firefox ?

[Алекс Белов]

Мне показалось или человек имел ввиду волнистую линию, а не бональную тень

[Иван Старков]

@benjaminsmith в файрфоксе тоже работает

[Иван Старков]

@Roosso Волнистая линия это картинка :-)

[Benajmin Smith]

@icelaba хм. прописал такое свойство навбару - ничего похожего не вышло..

[Benajmin Smith]

@icelaba так все таки - картинка или тень? есть готовое решение?

[Иван Старков]

@benjaminsmith бордер это граница - там это синенькая рамочка, так вам что надо волнистую линию или рамочку :-)

[Benajmin Smith]

@icelaba волнистую линию ;)

[Иван Старков]

background-image: url(images/bg_частьволны.png);
background-position: left bottom;
background-repeat: repeat-x;
}
накладывать на картинку элемент с таким стилем по ширине картинки
bg_частьволны.png - кусок волны равный периоду

[Benajmin Smith]

продублируйте пожалуйста это в ответ - я вам решение поставлю. спасибо большое.

[Иван Старков]

не за что :-) в css щас много всего развелось, неудивлюсь что и без картинки можно - как вариант заместо картинки подставлять svg

[Benajmin Smith]

@icelaba хорошо, буду пробовать :)

[Алекс Белов]

@icelaba Таки я в курсе. Я просто уточнил, а то @icelaba не так понял вопрос

Answer 5

[Евгений Низамиев]

Вот есть такой способ, но думаю он не совсем вам подходит, потому-что там можно сделать только цветом.
Тогда придётся использовать фоновую картинку с такими зубчиками, другой адекватной реализации я не представляю.