Latihan 1: Clip Path — CSS

Latihan 1 dari materi Clip Path di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kotak .diamond sudah ada di editor. Potong jadi belah ketupat.

Di dalam aturan .diamond, ganti komentarnya dengan baris ini:

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Itu empat titik, urut searah jarum jam: tengah atas (50% 0%), tengah kanan (100% 50%), tengah bawah (50% 100%), tengah kiri (0% 50%). Tulis dengan urutan ini, karena pengecek membandingkan titiknya satu per satu.

Hint

Belah ketupat punya empat pojok, dan tiap pojoknya ada di tengah salah satu sisi kotak.
Pakai clip-path dengan fungsi polygon(). Tiap titik ditulis x y dalam persen, dan antar titik dipisah koma.
Di dalam .diamond { ... }, ganti komentarnya dengan clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Clip Path — CSS

Hint

Memperbarui Aplikasi