Tło w kształcie fali (wavy shape) z pomocą CSS

Czas czytania: 2 minut

W związku z tym, że mamy wakacje postanowiłam pisać o nieco lżejszych tematach. Dlatego też dzisiaj pokażę wam jak zrobić efekt falującego tła (wavy shape, efekt fali) na stronie. W brew pozorom efekt ten przynajmniej w uproszczonej wersji jest dosyć prosty i mało czasochłonny.

Ostateczny efekt, o który nam chodzi będzie taki jak na obrazku poniżej.

Nie jest to więc jakaś „duża fala”, ale od czegoś trzeba zacząć.

Falujące zakończenie tła z pomocą CSS

Budowę naszego tła zaczniemy od zbudowania kontenera, którego tło będziemy przekształcać.

<div class="wave"/>
<div/>

Jak widać jest to zwykły DIV praktycznie na stronie niewidoczny. Dlatego teraz zmodyfikujemy go z pomocą CSS.

.wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #d63e3e;
  margin: 0 auto;
}

No dobrze mamy teraz zwykły prostokąt. Teraz by stworzyć falę skorzystamy z pseudo elementów CSS czyli :before i :after. Odsyłam was do mojego wpisu na ten temat jeśli jeszcze ich nie znacie albo chcecie wiedzieć na ten temat coś więcej.

Natomiast nasz kod prezentuje się następująco:

.wave:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 57%;
    height: 80px;
    background-color: white;
    right: -5px;
    top: 40px;
}

.wave:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 51%;
    height: 70px;
    background-color: #d63e3e;
    left: 0;
    top: 27px;
}

A tak to wygląda po złożeniu w całość:

Gdzie można wykorzystać ten efekt?

Podchwytliwe pytanie ? – oczywiście na stronie internetowej. Jeżeli rozdzielimy sekcje naszej strony z pomocą takiego efektu będzie ona na pewno ciekawiej wyglądać.

Źródła:
https://stackoverflow.com/questions/17202548/wavy-shape-with-css
https://www.freecodecamp.org/forum/t/bottom-wave-shape-effect/169299/2