html - 报告标题的 css 波形背景

Question

我需要在 HTMl 中为 A4 纸创建此页眉设计。

这是我需要的设计:

我看到这个问题很有帮助，但我无法让它适合我的维度。 Wavy shape with css

这是原始的 fiddle : http://jsfiddle.net/7fjSc/9/

这就是我正在尝试的: 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;
}

编辑 我尝试为 A4 纸使用固定宽度，宽度为 2080 像素。但我想如果我们可以将此代码调整为相对 (100%) 会更好

对此有什么想法吗？

Answer 1

基于 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/>