CSS polygon() फ़ंक्शन

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

CSS polygon() CSS polygon() फ़ंक्शन का उपयोग करते हैं

polygon() फ़ंक्शन का उपयोग करते हैं clip-path प्रतियोगिता और shape-outside प्रतियोगिताओं को एक साथ प्रयोग करें。

उदाहरण

उदाहरण 1

चित्र को आयताकार में काटें:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

अपने आप सामने देखें

उदाहरण 2

चित्र को आयताकार में काटें:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

अपने आप सामने देखें

उदाहरण 3

का उपयोग करें polygon()、clip-path और shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

अपने आप सामने देखें

CSS व्याकरण

polygon(fill-rule, length-percentage)
मान वर्णन
fill-rule

वैकल्पिक।फ़िल नियम को निर्दिष्ट करें।यह नौनून या evenodd हो सकता है。

मूलभूत मान नौनून रहता है。
length-percentage

आवश्यक।मुख्य कोणों को परिभाषित करने के लिए बिन्दु निर्दिष्ट करें।यह लंबाई या प्रतिशत मान हो सकता है。

हर बिन्दु एक यूनिक्स और वाई कोआर्डिनेट है।0 0 बाएं ऊपरी कोन को परिभाषित करता है, 100% 100% दायां नीचे कोन को परिभाषित करता है。

तकनीकी विवरण

संस्करण: CSS Shape Module Level 1

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

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

च्रोम एज फायरफॉक्स सफारी ओपेरा
37 79 54 10.1 24

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

संदर्भःclip-path प्रतियोगिता

संदर्भःshape-outside प्रतियोगिता

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

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

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