The shape-outsidekontrol properti bagaimana konten akan membungkus bounding-box elemen melayang ini. Biasanya ini agar teks dapat mengalir ulang di atas bentuk seperti lingkaran, elips, atau poligon:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Penting untuk diperhatikan bahwa properti ini hanya akan berfungsi pada elemen mengambang untuk saat ini, meskipun hal ini kemungkinan besar akan berubah di masa mendatang. The shape-outsideproperti juga dapat dimanipulasi dengan transisi atau animasi.
Nilai
circle(): untuk membuat bentuk lingkaran.ellipse(): untuk membuat bentuk elips.inset(): untuk membuat bentuk persegi panjang.polygon(): untuk membuat bentuk apa pun dengan 3 simpul atau lebih.url(): mengidentifikasi gambar mana yang harus digunakan untuk membungkus teks.initial: area apung tidak terpengaruh.inherit: mewarisishape-outsidenilai dari orang tua.
Nilai-nilai berikut mengidentifikasi referensi model kotak mana yang harus digunakan untuk memposisikan bentuk di dalam:
margin-boxpadding-boxborder-box
Nilai-nilai ini harus ditambahkan ke akhir, misalnya: shape-outside: circle(50% at 0 0) padding-box. Secara default, margin-boxreferensi akan digunakan.
elips()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )The ellipse()Fungsi membutuhkan nilai-nilai jari-jari untuk x, y sumbu elips diikuti oleh koordinat posisi pusat bentuk dalam kotak berlari-nya. Misalnya contoh di atas akan memposisikan pusat elips di tengah vertikal dan horizontal .elementdiv:
Meskipun demo di atas mungkin menyarankan agar kita mengubah bentuknya divsendiri, jika kita menambahkan batas dan gambar latar belakang kita akan menemukan bahwa kotak pembatas sebenarnya masih persegi panjang:
Mungkin lebih baik untuk memikirkannya seperti ini: dengan shape-outsideproperti kita mengubah hubungan elemen lain di sekitar elemen, bukan geometri elemen itu sendiri. Untuk memperbaikinya kita perlu menggunakan shape-outsidebersama clip-path()properti, seperti dalam contoh ini:
lingkaran()
.element ( shape-outside: circle(50%); )Fungsi ini membuat lingkaran, dan pada contoh kode di atasnya akan membuat lingkaran dengan radius setengah dari tinggi dan lebar .element. The circle()Fungsi juga dapat menggunakan sintaks yang sama untuk memposisikan bentuk dalam.
url ()
.element ( shape-outside: url('circle.png.webp'); )Dalam contoh ini, kami memiliki dua gambar mengambang, satu di kedua sisi blok teks. Karena kedua gambar memiliki shape-outsideproperti yang disetel maka teks di bawahnya akan menghindari kedua float tersebut.
Anda juga dapat menyetel shape-image-thresholdproperti yang akan memberi tahu browser piksel mana, bergantung pada transparansi, yang harus membuat bentuk. Sebagai contoh:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Dalam contoh ini, satu-satunya piksel yang akan membuat bentuk harus memiliki transparansi 50% ke atas. Nilai dari 0.0(transparan) hingga 1.0(buram) valid.
poligon()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Fungsi ini membuat bentuk apa pun yang memiliki tiga atau lebih simpul, misalnya:
Penting untuk diperhatikan bahwa jika properti ini akan dianimasikan, properti ini memerlukan jumlah simpul yang sama saat Anda mendeklarasikan status animasi:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )sisipan()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()adalah fungsi untuk membuat bentuk persegi panjang, dibutuhkan lima parameter tetapi yang kelima, for border-radiusadalah opsional. Argumen lainnya adalah offset ke dalam dari tepi .element:
Di atas kita memiliki elemen dengan lebar 200px kali tinggi 200px dan kami mengimbangi bentuk dalam 50px di setiap arah kecuali sisi kiri. Dengan cara ini teks akan membungkus di atas bentuk meskipun div meluas ke atas.
Dukungan browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 37 | 62 | Tidak | 79 | 7.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |