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:
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.
Gabung dalam percakapan