CSS ellipse() फ़ंक्शन

परिभाषा और उपयोग

CSS का ellipse() फ़ंक्शन दो दायरा x और y वाले दीर्घवृत्त को परिभाषित करता है。

ellipse() फ़ंक्शन आमतौर पर clip-path प्रयोग shape-outside प्रयोग करें

उदाहरण

उदाहरण 1

चित्र को x दायरा 50% और y दायरा 30% की दीर्घवृत्त के रूप में काटें:

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

अपने आप प्रयोग करें

उदाहरण 2

चित्र को x दायरा 50% और y दायरा 30% की दीर्घवृत्त के रूप में काटें और दीर्घवृत्त के केंद्र को दायाँ ओर स्थानांतरित करें:

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

अपने आप प्रयोग करें

उदाहरण 3

इस्तेमाल करें clip-path और ellipse() एनिमेशन प्रभाव देखें:

#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%);}
}

अपने आप प्रयोग करें

उदाहरण 4

साथ मिलकर प्रयोग करें ellipse()、clip-path और shape-outside:

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

अपने आप प्रयोग करें

CSS व्याकरण

ellipse(xy-radius स्थान पर)

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

संदर्भःCSS clip-path प्रयोग

संदर्भःCSS शेप-आउटसाइड विशेषता

संदर्भःCSS circle() फ़ंक्शन

संदर्भःCSS इनसेट() फ़ंक्शन

संदर्भःCSS पोलिगन() फ़ंक्शन