CSS क्लिप-पथ जनरेटर

CSS क्लिप-पथ एक polygon() फ़ंक्शन स्वीकार करता है जो किसी भी संख्या में x/y निर्देशांक जोड़ों से बना होता है, जिसका अर्थ है कि यह एक बॉक्स को साधारण आयतों और वृत्तों से कहीं आगे की आकृतियों में तराश सकता है। समस्या यह है कि हाथ से उन निर्देशांकों को टाइप करना उबाऊ है और एक बुनियादी त्रिभुज से आगे किसी भी चीज़ के लिए सही कर पाना लगभग असंभव है — यह जनरेटर उस निर्देशांक सूची को लाइव पूर्वावलोकन पर खींचने योग्य बिंदुओं के सेट में बदल देता है, ताकि आप जो आकृति देखते हैं वह हमेशा वही आकृति हो जो CSS उत्पन्न करता है।

पूर्वावलोकन पर हर बिंदु बॉक्स की चौड़ाई और ऊँचाई के प्रतिशत के रूप में संग्रहीत होता है, जो ठीक वैसे ही है जैसे clip-path: polygon() आंतरिक रूप से काम करता है: इस तरह से बनाई गई आकृति अपना अनुपात सही रखती है, चाहे वह एलिमेंट किसी वास्तविक पेज में किसी भी आकार में दिखाई दे — एक छोटे आइकन मास्क से लेकर पूरी-चौड़ाई वाले हीरो बैनर तक। रूपरेखा को फिर से आकार देने के लिए किसी भी बिंदु को खींचें, जहाँ आपने क्लिक किया ठीक वहाँ नया बिंदु जोड़ने के लिए किसी किनारे के पास क्लिक करें, या किसी मौजूदा बिंदु को हटाने के लिए उस पर डबल-क्लिक करें — संपादक हमेशा कम से कम तीन बिंदु रखता है, क्योंकि बहुभुज इससे कम बिंदुओं के साथ मौजूद नहीं रह सकता।

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

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