CSS clip-path जनरेटर

अवलोकन

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

कैसे उपयोग करें (चरण-दर-चरण)

1. 1

   एक आकृति चुनें या बनाएँ

   किसी प्रीसेट (त्रिभुज, षट्भुज, वृत्त) से शुरू करें या कस्टम बहुभुज परिभाषित करने हेतु बिंदु रखें।

2. 2

   बिंदु खींचें

   लाइव पूर्वावलोकन में कोनों को तब तक हिलाएँ जब तक आकृति सही न दिखे।

3. 3

   clip-path CSS कॉपी करें

   उत्पन्न clip-path मान को अपने तत्व पर चिपकाकर उसे उस आकृति में काटें।

यह कैसे काम करता है

आप एक आकृति चुनते या बनाते हैं, और टूल उसे clip-path से परिभाषित करता है — आमतौर पर प्रतिशत निर्देशांकों का polygon(), या circle() या ellipse() जैसा प्रीसेट। आकृति के बाहर सब कुछ पारदर्शी हो जाता है, इसलिए तत्व केवल रूपरेखा के भीतर दिखता है। आप लाइव पूर्वावलोकन में बिंदु खींचते हैं और टूल संगत clip-path मान लिखता है, जिसे आप किसी भी तत्व पर चिपका सकें।

कब उपयोगी है

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

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