clip-path dengan polygon() dan circle()
Potong elemen menjadi bentuk polygon atau lingkaran kustom menggunakan properti clip-path.
clip-path dengan polygon() dan circle() adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa itu clip-path?
clip-path memotong area yang terlihat dari suatu elemen menjadi bentuk tertentu. Segala sesuatu di luar bentuk tersebut tidak terlihat, tetapi tetap menempati ruang dalam tata letak.
clip-path: circle()
Potong elemen menjadi bentuk lingkaran. Argumennya adalah radius:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
Potong menjadi bentuk elips dengan menentukan radius x, radius y, dan posisi pusat opsional:
<div class="card-image"></div>
clip-path: polygon()
Fungsi clip-path yang paling kuat. Tentukan poligon dengan mencantumkan pasangan koordinat x,y:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
Potong menjadi persegi panjang dengan sudut membulat opsional. Argumennya adalah jarak inset:
<div class="card"></div>
clip-path untuk Bentuk Bagian
Buat transisi bagian yang miring di antara berbagai bagian halaman:
<div class="section-diagonal">Diagonal Section</div>
Menganimasikan clip-path
clip-path dengan jumlah titik yang sama dapat ditransisikan untuk membuat animasi penyingkapan dan perubahan bentuk:
<div class="reveal visible"></div>
clip-path dibandingkan border-radius
Untuk bentuk membulat sederhana, border-radius lebih baik — properti ini bekerja dengan latar belakang dan garis tepi. Gunakan clip-path saat Anda memerlukan bentuk nonpersegi panjang yang tidak dapat dibuat dengan border-radius.
clip-path: path()
path() menerima string jalur SVG untuk membuat bentuk sembarang:
<div class="star"></div>
Pertimbangan Performa
clip-path membuat konteks penumpukan baru dan dapat memicu pengecatan pada setiap bingkai saat dianimasikan. Menganimasikan clip-path lebih mahal daripada transform atau opacity — kombinasikan dengan hati-hati.
Kotak Referensi clip-path
Sistem koordinat untuk clip-path adalah kotak border elemen (atau kotak margin untuk SVG). Persentase bersifat relatif terhadap dimensi elemen.
Pemeriksaan Cepat
Fungsi clip-path mana yang membuat bentuk tidak beraturan dan bukan persegi panjang, yang ditentukan oleh pasangan koordinat?
Ringkasan
clip-path memotong elemen menjadi bentuk geometris. circle() dan ellipse() membuat potongan membulat. polygon() menentukan bentuk apa pun yang memiliki banyak titik sudut. inset() memotong menjadi persegi panjang dengan pembulatan opsional. Animasikan transisi di antara bentuk poligon dengan jumlah titik yang sama untuk membuat penyingkapan yang dramatis. Gunakan path() untuk bentuk sembarang berbasis SVG.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “clip-path dengan polygon() dan circle()” gratis?
Ya — teks lengkap “clip-path dengan polygon() dan circle()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “clip-path dengan polygon() dan circle()”?
Potong elemen menjadi bentuk polygon atau lingkaran kustom menggunakan properti clip-path. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “clip-path dengan polygon() dan circle()” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- clip-path dengan polygon() dan circle()
- shape-outside untuk Pembungkusan Teks
- Menganimasikan Bentuk clip-path
- Mask CSS vs Clip-path