Membuat Bentuk Ombak dengan CSS

Wave shape with CSS only - Kebetulan lagi coba uprak-oprek template, kali ini saya akan membagikan bagaimana Membuat bentuk Ombak hanya dengan CSS. Hasil tampilannya kurang lebih seperti gambar di bawah ini :

Konsep Pembuatan

Untuk membuat objek dengan bentuk ombak ini menggunakan CSS :before dan :after. Ilustrasinya seperti gambar di bawah ini :

Jadi konsepnya, membuat objek A, kemudian C sebagai :before dan B sebagai :after. Kemudian samakan warna A dan B, kemudan C dan D. Sehingga HTML dan CSS nya sebagai berikut.

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

#wave-container{
  width:600px;
  background:white;
}
#wave {
  position: relative;
  height: 70px;
  background: #27abe2;
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: #fff;
  right: -5px;
  top: 37px;
}
#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #27abe2;
  left: 0;
  top: 27px;
}

Uji Coba JsFiddle

Kalau mau ujicoba silahkan di jsFiddle

Ujicoba JsFiddle

Bentuknya memang tidak terlalu sempurna, sobat bisa memodifikasi sesuka hati./

Semoga Bermanfaat....