Я пытаюсь создать округлые волны с помощью 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
Комментариев нет:
Отправить комментарий