ZMedia Purwodadi

Membuat Bentuk Ombak dengan Pure CSS

Daftar Isi
Membuat Bentuk Ombak dengan Pure CSS

Kali ini codepelajar akan membagikan tutorial cara membuat bentuk ombak hanya menggunakan CSS saja dan hasilnya akan sama seperti gambar dibawah ini:

Membuat Bentuk Ombak dengan Pure CSS

Konsep Pembuatan

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.

HTML:

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

CSS:

#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;
}

Penutup

Dengan ini sobat dapat menempatkan CSS ombak yang menarik pada tema website dan membuat pengunjung menjadi betah dalam membaca website.