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.

Ellipse

Mirip dengan fungsi circle() adalah Ellipse(), yang menciptakan oval. Untuk menunjukkan, kita dapat membuat elemen dan kelas elips.

Kali ini, kami menetapkan tinggi dan lebar yang berbeda untuk membuat oval memanjang secara vertikal.

Perbedaan antara ellipse() dan circle() adalah elips memiliki dua jari – jari dan ry, atau jari – jari sumbu X dan jari – jari sumbu Y. Karena itu, contoh di atas juga dapat ditulis sebagai:

 

Parameter posisi sama untuk lingkaran dan elips. Jari-jari, selain menjadi unit pengukuran, juga mencakup opsi sisi terjauh dan sisi terdekat.

sisi terdekat mengacu pada panjang dari tengah ke sisi terdekat dari kotak referensi, dan sebaliknya, sisi terjauh mengacu pada panjang dari tengah ke sisi terjauh dari kotak referensi. Ini berarti bahwa kedua nilai ini tidak berpengaruh jika posisi selain dari standar tidak disetel.

Berikut adalah demonstrasi perbedaan membalik sisi terdekat dan sisi terjauh pada elips () dengan offset 25% pada sumbu X dan Y.