How to create shape with a wavy edge - css

Question

I need to make custom shape(see image attached) on Dreamweaver and found the code below for reference. I'm not sure which values to change in the reference code to achieve my custom shapes. I don't know which values to change: top, left, width, or height to suit my custom shape. My max width of the shape is 1832px. Max height of wave is 179px. Lesser wave height is 113px. Please help.
Reference:
http://jsfiddle.net/7fjSc/9/
#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;
}
<div id="wave"></div>

Answer 1

You can see from this link:
http://jsfiddle.net/7fjSc/1248/
#wave:before
and
#wave:after
refer to two elliptical circles that are positioned over a rectangle. The left ellipsis is the same color as the rectangle (#e0efe3) while the ellipsis to the right is the same color as the background (white). This is a common technique with CSS to make rounded objects. Your example places smaller circles over a large rectangle, but to achieve the shape you want, you will have to place larger circles over a smaller rectangle (this will give you the curved shape on the left side). To achieve elliptical circles, change the border-radius attribute. Manipulation of these attributes should allow you to obtain the shape you need. Good luck!