2

I have a design with wave structure in top and three static images in bottom.Top image is the banner image ie dynamic, user will upload a image,we need to show that image in a div with wave structure as show below.Is there is any way to achieve it using svg, canvas, HTML and css3.

enter image description here

Ninju
  • 2,522
  • 2
  • 15
  • 21
  • Possible duplicate of [this](http://stackoverflow.com/questions/17202548/wavy-shape-with-css) – Dana Dec 29 '16 at 07:44
  • 1
    @Dana this is not the duplicate.I want the image to be fit in that curve div.I don't want the div positioning using absolute. – Ninju Dec 29 '16 at 09:31

1 Answers1

0
 You can play with the values:
 HTML:
<div id="wave"></div>
CSS:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
 }
 #wave:after {
  content: "";
 display: block;
 position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
maurya89
  • 11
  • 2