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

क्लिप पाथ जेनरेटर क्या है?

यह clip-path आकार विज़ुअली बनाता है। Polygon को प्रीव्यू में पॉइंट ड्रैग करके या सटीक प्रतिशत लिखकर एडिट किया जा सकता है, त्रिभुज से लेकर तारे और स्पीच बबल तक के प्रीसेट के साथ; circle, ellipse और inset आकार स्लाइडर से सेट होते हैं।

क्लिप पाथ जेनरेटर का उपयोग कैसे करें

1. Shape चुनें: Polygon, Circle, Ellipse या Inset।
2. Polygon के लिए प्रीसेट चुनें, फिर हैंडल ड्रैग करें या हर पॉइंट का X/Y प्रतिशत लिखें; Add point / Remove point इस्तेमाल करें।
3. Circle और ellipse के लिए रेडियस और केंद्र सेट करें; inset के लिए Top, Right, Bottom, Left और वैकल्पिक Corner radius सेट करें।
4. क्या कट रहा है देखने के लिए Show the clipped-away area चालू करें।
5. CSS कोड कॉपी करें।

उदाहरण

Hexagon preset with point 1 moved to X 20%

clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

क्लिप पाथ जेनरेटर का उपयोग कब करें

clip-path को सजावटी इमेज आकार, तिरछे सेक्शन किनारे, हेक्सागन अवतार और रिवील एनिमेशन के लिए इस्तेमाल करें (समान संख्या के पॉइंट वाले आकारों के बीच clip-path एनिमेट हो सकता है)। आकार के बाहर का कंटेंट छिप जाता है और क्लिक नहीं लेता। गोल आयतों के लिए border-radius बेहतर है; जिन आकारों के चारों ओर टेक्स्ट बहे उनके लिए shape-outside इस्तेमाल करें।

क्लिप पाथ जेनरेटर कैसे काम करता है

निर्देशांक एलिमेंट के बॉर्डर बॉक्स के प्रतिशत हैं, ऊपर-बाएँ कोने से मापे हुए। Polygon पॉइंट के क्रम में polygon(x% y%, …), circle circle(r% at x% y%), ellipse ellipse(rx% ry% at x% y%) और inset inset(top right bottom left round r) के रूप में लिखे जाते हैं, जिसमें चारों ऑफ़सेट margin शॉर्टहैंड की तरह छोटे किए जाते हैं। Add point चुने हुए पॉइंट और अगले पॉइंट के ठीक बीच में नया पॉइंट जोड़ता है।

सामान्य उपयोग मामले

• ✓ हेक्सागन या तारे के आकार के अवतार
• ✓ तिरछे हीरो सेक्शन किनारे
• ✓ तीर और शेवरॉन स्टेप इंडिकेटर
• ✓ स्पीच-बबल कार्ड
• ✓ आकार बदलने वाले होवर एनिमेशन

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

और श्रेणियाँ देखें