How to make a curved/wavy footer line with a google map in the back of it?

How could I make an waved footer like in this screenshot ?
I tried with css before:: and after::, I tried with border-right-bottom-radius, and many tricks like that.

I have this picture element, could I use it ?
I want the google map wich is below to be with z-index: -1. What I mean is that I would like that the google map to appear in the back of the above curved line(position: absolute).

Can somebody help me to execute that footer with google map and top curved green border in code ?


Source: css3

Leave a Reply