Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Волны в CSS или SVG

Я пытаюсь создать округлые волны с помощью CSS, и у меня проблемы. Сейчас я использую border-radius для создания волн, но он больше похож на облака. Я попытался использовать transform: translateZ(180deg);, но цвет div перевернулся.
Вот что я хочу получить:

А здесь, что получилось у меня:

.wave1 { left: 0%; margin-left: -50px; } .wave2 { margin-left: -69px; } .wave3 { margin-left: -69px; } .wave4 { margin-left: -69px; } .waves { width: 200%; clear: none; z-index: 100; position: absolute; margin-top: 200px; margin-left: -150px; } .waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; background-color: #fff; } .bottom-half { width: 100%; height: 50%; top: 70%; position: absolute; background-color: #fff; } .background-waves { width: 200%; clear: none; z-index: 50; position: absolute; margin-top: 190px; margin-left: 75px; } .bwave1 { left: 0%; margin-left: -50px; } .bwave2 { margin-left: -69px; } .bwave3 { margin-left: -69px; } .bwave4 { margin-left: -69px; } .background-waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; background-color: #fff; opacity: 0.5; }



Ответ

Я бы предложил использовать встроенный ручной SVG-код.
Ваши фигуры довольно просты, так что волны с элементом SVG тоже просто сделать.
Все, что вам нужно знать о path SVG есть на MDN.
В следующем примере я использовал два элемента пути с квадратичными кривыми Безье, чтобы сделать волны:
svg{ background:url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center; background-size:cover; width:100%; display:block; }
Источник: Waves in CSS or SVG @web-tiki

Комментариев нет:

Отправить комментарий