Как сделать волну на фоне?

147
17 июля 2019, 20:10

у меня есть страница с карточками, на фоне расположена "волна", вроде выглядит супер просто, но не могу понять как сделать ее просто и правильно, подскажите пожалуйста! У меня есть svg с этой волной, но опять же как разбить весь фон на две части, чтобы не затронуть контент весь, что-то совсем туплю(((

UPDATE Вот svg волны

Answer 1

Не нашел SVG с повторяющейся волной поэтому такой не аккуратный переход, но с Вашим SVG должно работать. Просто подставьте путь к своему файлу в background-image: url( путь )

.main { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjgwIiBoZWlnaHQ9IjE5NiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS03NCA4Ny4zMDdDMTQ1LjM5MyAyOS4xMDIgMzQ5LjYyNyAwIDUzOC43MDIgMGMyODMuNjExIDAgNTAyLjIyNyA2My4yMzUgNzg0LjcyNCA4Ny4zMDcgMTg4LjMzMiAxNi4wNDggMzMyLjE5IDEuNDk3IDQzMS41NzQtNDMuNjUzVjE5NkgtNzRWODcuMzA3eiIvPjwvc3ZnPg=="); 
  background-repeat: repeat-x; 
  background-size: auto 50%; 
  background-color: #eeeeee; 
  background-position: bottom; 
} 
 
.content { 
  width: 300px; 
  height: 80%; 
  background-color: #cccccc; 
}
<div class="main"> 
  <div class="content"></div> 
</div>

READ ALSO
Анимация кнопки при нажатии
CSS

Анимация кнопки при нажатии

Пытаюсь найти примеры как задать анимацию кнопки при нажатии и наведении на неёПока без успешно, гугл мне не хочет помогать

 211
Событие &#39;fetch&#39; в ServiceWorker
javascript

Событие 'fetch' в ServiceWorker

Интересует такой вопрос, срабатывает ли событие fetch в ServiceWorker при обращении к не-origin доменам? Или же можно обрабатывать обращения только на свой...

 177
Обход запрета автозапуск iframe Chrome
javascript

Обход запрета автозапуск iframe Chrome

Я делаю веб страничку, которая ведет стрим с youtube, как мне сделать, чтобы при запуске страницы видео начинало идти со звуком? Если я запускаю...

 161
Смена иконки (реализация)
javascript

Смена иконки (реализация)

Ниже код, в котором должна иконка microphone меняться на microphone-slash и наоборот в зависимости от режима отображения (воспроизведение или пауза)

 151