Задать вопрос
benjaminsmith
@benjaminsmith
Ruby on Rails developer

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

Приветствую. Вопрос к верстальщикам. Как реализовать такую волнистую линию у навбара? ?
yadi.sk/d/O-jBE1_QJw4ky
  • Вопрос задан
  • 13867 просмотров
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 3
icelaba
@icelaba
Знаю и умею всё
:-)
background-image: url(images/bg_частьволны.png);
background-position: left bottom;
background-repeat: repeat-x;
}
накладывать на картинку элемент с таким стилем по ширине картинки
bg_частьволны.png - кусок волны равный периоду
Ответ написан
Комментировать
то что сказал icelaba + не забудьте поставить у нижнего блока отрицательный margin(равный высоте картинки волны) и z-index меньше (это при условии, если та картинка на которую находит эта волна не фон самого сайта, а фон блока).
Ответ написан
Комментировать
вырезать кусок волны скажем 10px в высоту и ширину.

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

и все)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
icelaba
@icelaba
Знаю и умею всё
вы можете это сами посмотреть в developer tools хрома
вот он
box-shadow: 0 0 0 1px #becdd8,0 0 8px rgba(0,0,0,0.1);
Ответ написан
RadiationX
@RadiationX
Front-End разработчик
Вот есть такой способ, но думаю он не совсем вам подходит, потому-что там можно сделать только цветом.
Тогда придётся использовать фоновую картинку с такими зубчиками, другой адекватной реализации я не представляю.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы