डेवलपर / CSS आकृतियाँ

CSS क्लिप-पाथ जनरेटर: बहुभुज, सर्कल, एलिप्स और Inset

6 बहुभुज प्रीसेट, खींचकर और कीबोर्ड से समायोजित किए जा सकने वाले बिंदुओं, सर्कल, एलिप्स और inset नियंत्रणों से CSS कट-आउट बनाएं। ग्रेडिएंट या स्थानीय इमेज का प्रीव्यू देखें और प्रतिशत या पिक्सेल CSS कॉपी करें।

CSS क्लिप-पाथ जनरेटर: बहुभुज, सर्कल, एलिप्स और Inset: यह मूल इमेज फ़ाइल में बदलाव किए बिना प्रीव्यू को चुने गए आकार में क्लिप करता है। प्रतिशत आउटपुट एलिमेंट के आयामों के अनुसार होता है। पिक्सेल आउटपुट संदर्भ चौड़ाई और ऊंचाई का उपयोग करता है; स्क्रीन पर फिट होने के लिए दिखाए गए प्रीव्यू का आकार बदलता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
Clip path shape benchलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

किसी क्रमांकित बिंदु को खींचें, उसकी arrow keys का उपयोग करें या निर्देशांक दर्ज करें। नीचे दिए गए निर्देशांक प्रतिशत हैं; pixel आउटपुट में reference size का उपयोग होता है।

पॉइंट 1
पॉइंट 2
पॉइंट 3
पॉइंट 4
पॉइंट 5
पॉइंट 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

प्रतिशत वाली shapes element के साथ आकार बदलती हैं। Circle percentages में normalised diagonal, जबकि ellipse percentages में width और height का उपयोग होता है। Pixel coordinates reference dimensions पर स्थिर रहते हैं।

CSS clipping

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Clipping, element के layout box को बदले बिना उसके दिखाई देने वाले क्षेत्र को बदलती है।

Basic shape coordinates

W3C CSS Shapes Level 1, basic shapes: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Polygon coordinates और ellipse radii reference box के आधार पर निर्धारित होते हैं; circle percentages इसके normalised diagonal का उपयोग करते हैं। Preset coordinates और gradient मौलिक artwork हैं।

इस्तेमाल करने का तरीका

  1. आकार और प्रीसेट चुनें, फिर संदर्भ आयाम सेट करें।
  2. बहुभुज के बिंदुओं को खींचें, तीर वाली कुंजियों का उपयोग करें या निर्देशांकों को संपादित करें; अन्य आकारों के लिए नियंत्रण समायोजित करें।
  3. प्रतिशत या पिक्सेल आउटपुट चुनें और CSS कॉपी करें।

गोपनीयता और सीमाएँ

वैकल्पिक इमेज प्रीव्यू आपके डिवाइस पर ही रहते हैं। कुछ भी अपलोड नहीं होता।

संबंधित टूल्स

CSS ग्रिडबॉक्स शैडोFlexbox

अक्सर पूछे जाने वाले सवाल

बिना खींचे किसी बिंदु को कैसे संपादित करें?

उसके नंबर वाले हैंडल पर फ़ोकस करें और तीर वाली कुंजियों का उपयोग करें, या बिंदुओं की सूची में X और Y प्रतिशत दर्ज करें। बहुभुज में कम से कम 3 बिंदु होने चाहिए।

क्या इससे क्रॉप की गई इमेज एक्सपोर्ट होती है?

नहीं। यह HTML एलिमेंट के लिए CSS एक्सपोर्ट करता है। स्थानीय इमेज केवल प्रीव्यू के लिए होती है।

सर्कल के प्रतिशत कैसे मापे जाते हैं?

CSS सर्कल की त्रिज्या के संदर्भ के रूप में सामान्यीकृत विकर्ण, sqrt((चौड़ाई का वर्ग + ऊंचाई का वर्ग) / 2), का उपयोग करता है। एलिप्स की त्रिज्याओं के लिए चौड़ाई और ऊंचाई का अलग-अलग उपयोग होता है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं