CSS ellipse() fonksiyonu

Tanımı ve kullanımı

CSS'nin ellipse() Fonksiyon, iki yarıçap x ve y'ye sahip bir elips tanımlar.

ellipse() Fonksiyonlar genellikle clip-path Özellikler ve shape-outside Özellikler birlikte kullanılır.

Örnek

Örnek 1

Görseli, x yarıçapı %50, y yarıçapı %30 olan bir elips olarak kesin:

img {
  clip-path: ellipse(50% 30%);
}

Kişisel olarak deneyin

Örnek 2

Görseli, x yarıçapı %50, y yarıçapı %30 olan bir elips olarak kesin ve elips merkezi sağa konumlandırın:

img {
  clip-path: ellipse(50% 30% at right);
}

Kişisel olarak deneyin

Örnek 3

Kullanarak clip-path ve ellipse() Animasyon etkisini gerçekleştirme:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

Kişisel olarak deneyin

Örnek 4

birlikte kullanılır ellipse()veclip-path ve shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

Kişisel olarak deneyin

CSS dilbilgisi

ellipse(xy-radius konumunda)

Teknik ayrıntılar

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

İlgili sayfa

Referans:CSS clip-path özelliği

Referans:CSS shape-outside özelliği

Referans:CSS circle() fonksiyonu

Referans:CSS inset() fonksiyonu

Referans:CSS polygon() fonksiyonu