Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan baik, bertemu lagi pada tutorial dumet school, kita lanjut lagi belajarnya, pada pembahasan kali ini kita akan belajar memanipulasi gambar membentuk X dengan css clip-path.

Propertis clip-path sebenarnya adalah propertis yang digunakan untuk croping gambar pada css, nah dengan propertis ini kita dapat memanipulasi gambar menjadi bentuk lain dengan sesuka kita, mungkin untuk lebih jelasnya kita langsung saja praktek, pertama teman-teman harus siapkan dulu satu buah gambar, setelah sudah silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

Disini saya menyisipkan sebuah gambar yang sudah saya siapkan pada bagian body,

jika teman-teman save maka hasil gambarnya pada browser akan seperti berikut ini:

Nah sekarang teman-teman tambahkan script css berikut ini:

Jika sudah dan teman-teman save scriptnya maka hasil di browser akan seperti berikut ini:

memanipulasi gambar membentuk X dengan css clip-path1

Gambarnya membentuk huruf x, untuk nilai dari polygonnya teman-teman bisa rubah sendiri pada bagian inspect element untuk lebih memahami nilai-pernilainya,

Oke teman-teman untuk tutorial kali tentangĀ memanipulasi gambar membentuk X dengan css clip-path ini saya rasa cukup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya, semoga tutorial yang singkat kali ini dapat bermanfaat untuk teman-teman semuanya.

Terima kasih