css wave background for a report header

Question

I need to create this header design in HTMl for an A4 sheet.

This is the design I need:

I saw this question that helped, but I couldnt get it working right for my dimensions. Wavy shape with css

This is the original fiddle: http://jsfiddle.net/7fjSc/9/

This is what I'm tring: http://jsfiddle.net/7fjSc/1422/

#wave {
  position: relative;
  height: 70px;
  width: 2080px;
  background: #e0efe3;
}

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

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

EDIT I'm tring to used fixed width for an A4 has 2080px. But I guess it would be even better if we can adapt this code to be relative (100%)

Any ideias on this?

Offtopic: Did you update your code 1422 times or is that an arbitrary value? `:)` — m4n0, Sep 21 '15 at 18:00
Manoj: I really think its a sequencial id, but I think it counts edits from the original jsfiddle. So, other people must of been updating that. I only updated once. hahaha — Marco Noronha, Sep 21 '15 at 18:01

score 2 · Accepted Answer · edited May 23 '17 at 12:14

based on the answer by Camaron A

#wave {
  position: relative;
  /*height and width can be set to anyhing*/
  height: 50px;
  width: 678px;
  background: #a0d8ef;
  background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 50%, #ddf1f9 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #a0d8ef), color-stop(50%, #ddf1f9), color-stop(100%, #ddf1f9));
  background: -webkit-linear-gradient(left, #a0d8ef 0%, #ddf1f9 50%, #ddf1f9 100%);
  background: -o-linear-gradient(left, #a0d8ef 0%, #ddf1f9 50%, #ddf1f9 100%);
  background: -ms-linear-gradient(left, #a0d8ef 0%, #ddf1f9 50%, #ddf1f9 100%);
  background: linear-gradient(to right, #a0d8ef 0%, #ddf1f9 50%, #ddf1f9 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a0d8ef', endColorstr='#ddf1f9', GradientType=1);
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 67% 120% 0% 0%;
  width: 51.3%;
  height: 100%;
  background-color: white;
  left: 0;
  bottom: -50%;
}
#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 0% 0% 50% 100%;
  width: 50.5%;
  height: 100%;
  right: 0;
  bottom: -50%;
  background: #ddf1f9;
}

<div id="wave" />
<div/>

Thank you very much for the effort... Still it's a long way to go. i'm playing with the values, but I cant seem to get to the smooth courve hahaha — Marco Noronha, Sep 21 '15 at 20:29

css wave background for a report header

1 Answers1