Contoh CSS clip-path dalam tata letak nyata

Pilih preset segi enam, beralih ke keluaran deklarasi, lalu salin aturan clip-path ke class gambar persegi Anda sendiri. Atur lebar dan tinggi sama besar serta object-fit: cover; contoh CSS lengkap memakai kotak demo 4:3 dan tidak boleh ditempel apa adanya ke avatar. Periksa wajah di dekat setiap tepi; mengubah poligon tidak memindahkan subjek.

Gunakan chevron pada gambar dekoratif di samping ajakan bertindak. Bandingkan kotak persegi dan lebar: koordinat persentase dapat mengubah sudut. Periksa ponsel dan letakkan teks penting serta tautan di luar area terpotong.

Terapkan jajaran genjang pada lapisan dekoratif di belakang kartu. Memotong seluruh wadah dapat menyembunyikan judul, tombol dan garis fokus. Gunakan Tab pada hasil akhir dan periksa kontrol di kedua lebar.

Mulai dari preset segi enam dan atur titik pertama ke X 30%, Y 0%. Tambahkan titik setelah titik terpilih atau hapus satu, dalam batas 3–32 titik. Seret titik, masukkan koordinat 0–100%, atau gunakan tombol panah (1%; Shift: 10%). Salin hanya deklarasi clip-path untuk mempertahankan tata letak; CSS lengkap menyertakan gaya demo. Uji kotak persegi dan lebar di desktop serta ponsel. Letakkan teks dan garis fokus di luar lapisan terpotong dan sediakan tampilan persegi panjang sebagai cadangan. Impor CSS dan pengeditan circle, ellipse, atau inset tidak didukung.

Toolars memelihara panduan ini dan alat yang ditautkan. Laporkan perbedaan antara petunjuk dan hasil saat ini agar keduanya dapat ditinjau bersama.

Contoh unduhan di bawah adalah masukan uji sintetis, bukan kisah pelanggan. Gunakan masukan dan pengaturan yang sama saat mengulangnya; periksa berkas unduhan sesuai petunjuk, bukan hanya pratinjau.

Pemeriksaan hanya mencakup contoh ini, bukan sertifikasi untuk semua berkas, peramban, atau aplikasi tujuan. Periksa ulang setelah alat berubah dan tinjau hasil Anda sebelum membagikannya.

Sampel sintetis Toolars · diperbarui 2026-09-13. Mendemonstrasikan alur, bukan kualitas foto atau pindaian nyata maupun penerimaan platform.

Sampel CSS memakai preset segi enam. Di CSS clip-path pilih segi enam, titik horizontal 24 dan vertikal 50. Bandingkan dua deklarasi clip-path pada unduhan dan sampel; warna serta spasi boleh berbeda. Uji elemen lebar dan sempit: persentase mengikuti kotak elemen. Pemotongan sendiri tidak membuat teks sekitar mengalir mengitari bentuk.

Unduh sampel masukan