श्रेणी: डेवलपर टूल
CSS त्रिभुज जनरेटर
बॉर्डर ट्रिक से शुद्ध-CSS त्रिभुज बनाएँ
एक दिशा, आकार और रंग चुनें ताकि एक शून्य-आकार का बॉक्स बने जिसके बॉर्डर एक तरफ़ रंगीन और बाकी दो तरफ़ पारदर्शी हों, जो त्रिभुज की तरह रेंडर होता है, साथ में लाइव पूर्वावलोकन और कॉपी करने के लिए तैयार CSS डिक्लेरेशन। सब कुछ आपके ब्राउज़र में गणना होती है।
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
CSS त्रिभुज एक `width: 0; height: 0;` वाला बॉक्स होता है जिसके बॉर्डर की एक तरफ़ रंग दिया जाता है और बाकी दो तरफ़ पारदर्शी बना दिया जाता है, ताकि सिर्फ़ रंगीन बॉर्डर का कोना दिखे। हाथ से करने पर यह उलटा होना आसान है — गलत जोड़ी की तरफ़ें, या पारदर्शी करने की बजाय ठोस छोड़ा गया बॉर्डर — इसलिए यह टूल एक दिशा, आकार और रंग से चारों डिक्लेरेशन बनाता है और बदलते ही असली बॉक्स पर नतीजा दिखाता है।
इस्तेमाल कैसे करें
- एक दिशा चुनें: ऊपर, नीचे, बाएँ या दाएँ।
- आकार और रंग सेट करें।
- बॉर्डर डिक्लेरेशन अपनी स्टाइलशीट में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या कुछ सर्वर पर भेजा जाता है?
- नहीं। पूर्वावलोकन आपके ब्राउज़र में रेंडर हुआ असली CSS बॉर्डर है, और डिक्लेरेशन पेज में ही बना हुआ टेक्स्ट है।
- त्रिभुज को width और height 0 पर सेट करने की ज़रूरत क्यों है?
- बॉर्डर ट्रिक इस बात पर निर्भर करती है कि बॉर्डर एक बिंदु पर मिलें, न कि किसी बॉक्स को घेरें। कोई भी गैर-शून्य width या height कोने को चपटा करके ट्रैपेज़ॉइड बना देगा।
- क्या मैं इसे टूलटिप या स्पीच बबल पर तीर के लिए इस्तेमाल कर सकता हूँ?
- हाँ — यह सबसे आम इस्तेमाल है। त्रिभुज को टूलटिप के किनारे पर absolute पोज़िशन करें और उसका रंग टूलटिप के बैकग्राउंड से मिलाएँ।