Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Bentuk Ombak dengan CSS

Membuat bentuk ombak hanya 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 :

Wave

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....

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Posting Komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.