श्रेणी: डेवलपर टूल

CSS Clip-Path जेनरेटर

हमारा अपना विचारकोई टूल नहीं मिला?

आकृति चुनें और इसका clip-path मान कॉपी करें

वृत्त या दीर्घवृत्त से लेकर षट्भुज, तीर या स्पीच बबल तक कोई आकृति चुनें, वह किनारों से कितना इनसेट हो यह तय करें, और लाइव पूर्वावलोकन के साथ नतीजे में मिला clip-path मान कॉपी करें।

आउटपुट
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।

यह टूल क्या करता है

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

इस्तेमाल कैसे करें

  1. एक आकृति चुनें।
  2. इसे बॉक्स के भीतर बढ़ाने या घटाने के लिए इनसेट बदलें।
  3. clip-path घोषणा कॉपी करें।

निजता

यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।

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

वृत्त और दीर्घवृत्त बाकी आकृतियों से अलग व्यवहार क्यों करते हैं?
circle() और ellipse() एक त्रिज्या लेते हैं, इसलिए वहाँ इनसेट सीधे त्रिज्या को घटाता है, जबकि पॉलीगॉन आकृतियाँ हर बिंदु को उसी प्रतिशत से केंद्र की ओर स्केल करती हैं।
क्या clip-path लेआउट को प्रभावित करता है या सिर्फ़ जो दिखता है उसे?
सिर्फ़ जो दिखता है उसे। तत्व लेआउट के लिए अपना मूल बॉक्स बनाए रखता है; clip-path केवल आकृति से बाहर के हिस्से छुपाता है, ठीक उसी तरह जैसे overflow: hidden किसी बॉक्स से बाहर की सामग्री छुपाता है।
क्या कुछ सर्वर पर भेजा जाता है?
नहीं। आकृति के बिंदु आपकी चुनी आकृति और इनसेट से पेज में ही निकाले जाते हैं, इसीलिए पूर्वावलोकन तुरंत अपडेट होता है।