CSS AdvancedLesson 66Preview gratis
CSS Image Shapes
Lesson ini bagian dari CSS · Semua level
Ringkasan
Gambar tidak harus selalu persegi panjang; kita bisa memotongnya menjadi bentuk tertentu dengan `clip-path` atau membuat teks mengelilinginya dengan `shape-outside`. Bentuk bulat untuk avatar bisa dibuat sederhana dengan `border-radius: 50%`. Kombinasi teknik ini membuat halaman terlihat lebih dinamis dan editorial.
Poin kunci
- `clip-path: circle()`, `polygon()`, atau `ellipse()` memotong tampilan elemen mengikuti bentuk
- `shape-outside` membuat teks membungkus area luar bentuk elemen yang mengapung
- `shape-outside` hanya bekerja pada elemen dengan `float`
- Avatar bulat cukup dengan ukuran sama panjang dan lebar lalu `border-radius: 50%`
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.