How to design this type of wave background (see on image) into only css?

Asked Jul 18 '20 at 09:41

Active Jul 18 '20 at 09:56

Viewed 32 times

I do this code for making Wave Background but not properly curved. checked image & understand better well..............

    footer{
    width:100%;
    height: 150px;
    position: relative;
    }
    #wave {
      position: absolute;
      left: 0px;
      bottom: 0;
      height: 10%;
      width: 100%;
      border-top-left-radius: 30%;
      background: rgb(206, 225, 235) none repeat scroll 0% 0%;
    }
    #wave::after {
      content: "";
      display: block;
      position: absolute;
      border-bottom-right-radius: 0;
      border-top-left-radius: 1000%;
      border-top-right-radius: 80%;
      border-bottom-left-radius: 10%;
      height: 100px;
      background-color: rgb(206, 225, 235);
      left: 0px;
      bottom: 50%;
      width: 100%;
    }

<!-- html code -->
    <footer>
    <div id="wave"></div>
    </footer>

edited Jul 18 '20 at 09:56

asked Jul 18 '20 at 09:41

Harshit Darji

the duplicate is doing what you want at the bottom but you can easily change it to the top – Temani Afif Jul 18 '20 at 09:45
I think that wave in your image is a svg made in ilustrator or other design software. – Tudor Alexandru Jul 18 '20 at 10:03
ya, i know this image is a svg ,but i want that same into css & html – Harshit Darji Jul 20 '20 at 09:07

How to design this type of wave background (see on image) into only css?

0 Answers0