Shapes atau bentuk CSS memungkinkan kita untuk membuat tata letak yang menarik dan unik dengan mendefinisikan bentuk geometris, gambar, dan gradien yang dapat mengalir konten teks. Pelajari cara menggunakannya dalam tutorial ini.

Circle

Kami akan mulai dengan fungsi Circle(). Bayangkan sebuah situasi di mana kita memiliki avatar melingkar dari seorang penulis yang ingin kita mengambang kiri, dan kami ingin teks deskripsi penulis mengalir di sekitarnya. Cukup menggunakan radius batas: 50% pada elemen avatar tidak akan cukup untuk mendapatkan teks untuk membuat bentuk lingkaran; teks masih akan memperlakukan avatar sebagai elemen persegi panjang.

Dengan bentuk lingkaran, kita dapat menunjukkan bagaimana teks dapat mengalir di sekitar lingkaran.

Kami akan mulai dengan membuat kelas lingkaran pada div reguler, dan membuat beberapa paragraf. (Saya menggunakan kutipan Bob Ross sebagai teks Lorem Ipsum.)

Di kelas circle kami, kami mengapungkan elemen ke kiri, memberikan tinggi dan lebar yang sama, dan mengatur bentuk-luar ke circle ().

Jika kita melihat halamannya, akan terlihat seperti ini.

Seperti yang Anda lihat, teks mengalir di sekitar bentuk lingkaran, tetapi kami tidak benar-benar melihat bentuk apa pun. Arahkan pada elemen di Developer Tools ataupun Inspect Element akan menunjukkan kepada kita bentuk sebenarnya adalah lingkaran.