CSS त्रिकोण जनरेटर

बॉर्डर ट्रिक, 25 साल पुराना CSS हैक जो अब भी काम करता है

CSS त्रिभुज तकनीक इस बात का फ़ायदा उठाती है कि CSS बॉर्डर-पेंटिंग एल्गोरिथ्म आसन्न बॉर्डरों को कैसे संभालता है। जब दो बॉर्डर किसी कोने पर मिलते हैं, उनके बीच की सीमा कोने को द्विभाजित करने वाले कोण पर एक तिरछी रेखा के रूप में खींची जाती है। सामान्य आकार के एलिमेंट में, कोना छोटा होता है और तिरछी रेखा बमुश्किल दिखती है। लेकिन यदि आप एलिमेंट की चौड़ाई और ऊँचाई को शून्य कर दें और उसे मोटी बॉर्डरें दे दें, कोने पूरी दृश्य जगह पर क़ब्ज़ा कर लेते हैं, और जो अदृश्य तिरछी रेखा थी वह त्रिभुज की दिखाई देने वाली धार बन जाती है। चार में से तीन बॉर्डरें पारदर्शी कर दें, चौथी रंगीन रहने दें, और आपने एक त्रिभुज खींच लिया जो रंगीन भुजा से दूर इशारा करता है। यह तकनीक 2007–2008 के आसपास Chris Coyier और अन्य लेखकों के पहले CSS-tricks लेखों में व्यापक रूप से दर्ज की गई; तब से यह वेब डिज़ाइनर के टूलकिट का एक बुनियादी हिस्सा है क्योंकि यह तेज़, स्केलेबल और हेक्स में रंगने योग्य आकार बनाती है, बिना SVG, बिना PNG, बिना अतिरिक्त HTTP अनुरोध और बिना जटिल CSS के। गणित सरल है पर पहली नज़र में अजीब (त्रिभुज की ऊँचाई रंगीन भुजा की बॉर्डर-चौड़ाई होती है; उसका आधार आसन्न पारदर्शी भुजा की बॉर्डर-चौड़ाई का दोगुना होता है)। यह जनरेटर गणित संभाल लेता है, आप बॉर्डर-चौड़ाई गिनने के बजाय स्लाइडर खींचते हैं।

आधुनिक विकल्प, clip-path, SVG, conic-gradient

2026 में बॉर्डर-ट्रिक त्रिभुज को प्रतिस्पर्धा है। CSS clip-path के साथ polygon() फ़ंक्शन (CSS Masking Module Level 1, 2017 से बेसलाइन ब्राउज़र समर्थन) आपको किसी भी एलिमेंट को मनमाने बहुभुज पर क्लिप करने देता है: clip-path: polygon(50% 0, 100% 100%, 0 100%) किसी भी एलिमेंट पर ऊपर की ओर त्रिभुज बना देता है। clip-path अधिक लचीला है (केवल तीन नहीं, जितने चाहें उतने शीर्षबिंदु; केवल खाली div नहीं, सामग्री वाले किसी भी एलिमेंट पर काम करता है), ट्रांसफ़ॉर्म और एनिमेशन के साथ बेहतर रचना करता है, और नए shape() फ़ंक्शन के माध्यम से गोल कोनों का समर्थन करता है। इनलाइन SVG (<svg><polygon points="50,0 100,100 0,100"/></svg>) सबसे ज़्यादा नियंत्रण देता है, स्ट्रोक, फ़िल, ग्रेडिएंट, SMIL या CSS के माध्यम से एनिमेशन, <title> एलिमेंट के माध्यम से सुगम्यता। conic-gradient चतुराई से रखे रंग-स्टॉप के ज़रिए त्रिभुज आकार बना सकता है, हालाँकि यह व्यावहारिक पैटर्न से अधिक उत्सुकता का विषय है। बॉर्डर-ट्रिक त्रिभुज सरल-सजावटी मामले (टूलटिप पॉइंटर, ड्रॉपडाउन कैरेट, स्पीच-बबल पूँछ) के लिए सही विकल्प बना हुआ है, जहाँ सरलता और शून्य ओवरहेड लचीलेपन से अधिक मायने रखते हैं; clip-path बेहतर है जब त्रिभुज किसी अधिक जटिल आकार का हिस्सा हो, जब अंदर टेक्स्ट डालना हो, या जब डिज़ाइन को गोल कोनों की ज़रूरत हो।

जहाँ CSS त्रिभुज अपनी जगह कमाते हैं

• टूलटिप और पॉपओवर पॉइंटर। छोटा त्रिभुज जो टूलटिप बबल को उसके एंकर एलिमेंट से जोड़ता है, सबसे आम उपयोग का मामला है, आप इसे टूलटिप पर एक CSS त्रिभुज स्यूडो-एलिमेंट (::before या ::after) के रूप में बना सकते हैं, एंकर की ओर वाले किनारे पर रखा हुआ।
• स्पीच बबल पूँछ। चैट-संदेश बबल, टिप्पणी कार्ड और उद्धरण कॉलआउट पर नुकीली पूँछ। टूलटिप पॉइंटर जैसी ही तकनीक, बस बड़ी और बबल के पृष्ठभूमि रंग से मेल खाने के लिए स्टाइल की हुई।
• ड्रॉपडाउन कैरेट संकेतक। सेलेक्ट बॉक्स और ड्रॉपडाउन मेनू बटनों में नीचे की ओर का छोटा त्रिभुज। नेटिव <select> एलिमेंटों में OS-स्टाइल वाले कैरेट होते हैं; <button> + पॉपओवर से बनी कस्टम ड्रॉपडाउन को अपना ख़ुद का चाहिए।
• एकॉर्डियन विस्तार/संकुचन संकेतक। वह त्रिभुज जो किसी एकॉर्डियन सेक्शन पर क्लिक करने पर दाएँ-इशारा (बंद) और नीचे-इशारा (खुला) के बीच पलटता है। CSS rotate ट्रांसफ़ॉर्म से एनिमेटेड।
• ब्रेडक्रंब विभाजक। ब्रेडक्रंब लिंकों के बीच दाएँ-इशारा करता त्रिभुज। अक्सर ::before के साथ CSS त्रिभुज के रूप में बनाया जाता है।
• बैनर और रिबन सजावट। सेल बैनर या टैग के अंत में त्रिभुजाकार खाँचा, «नया» बैज पर कोना-मोड़, स्क्रॉल के लिए नीचे इशारा करता हीरो सेक्शन के नीचे का शेवरॉन। सभी एकल-रंग त्रिभुज, सभी बॉर्डर-ट्रिक से।
• सजावटी विभाजक। सेक्शन विभाजकों के रूप में छोटे त्रिभुजों की पंक्ति, ज्यामितीय पैटर्न ओवरले, रेट्रो-शैली के अलंकरण।

सुगम्यता संबंधी विचार

CSS त्रिभुज शुद्ध रूप से दृश्य सजावट हैं, उनका कोई शब्दार्थ अर्थ नहीं और सुगम्यता ट्री में कोई उपस्थिति नहीं। स्क्रीन रीडर उन्हें घोषित नहीं करते। पूरी तरह सजावटी उपयोग (स्पीच-बबल पूँछ, ब्रेडक्रंब विभाजक) के लिए यही सही व्यवहार है। उन त्रिभुजों के लिए जो अर्थ संप्रेषित करते हैं (सक्रिय सेक्शन की ओर इशारा करता तीर, «अधिक के लिए क्लिक करें» का संकेत देता ड्रॉपडाउन कैरेट), अर्थ को दूसरे माध्यमों से व्यक्त किया जाना चाहिए: ड्रॉपडाउन ट्रिगर पर aria-expanded विशेषता, दृश्यमान टेक्स्ट लेबल, बटन पर aria-label। स्थिति संप्रेषित करने के लिए CSS त्रिभुज पर निर्भर न रहें; इसे अन्य विशेषताओं द्वारा शब्दार्थक रूप से संप्रेषित स्थिति के दृश्य पुष्टिकरण के रूप में मानें। CSS ::before और ::after स्यूडो-एलिमेंट सामग्री आम तौर पर स्क्रीन रीडर द्वारा नहीं पढ़ी जाती, जो सजावटी आकारों के लिए उपयुक्त है।

यह जनरेटर जो त्रिभुज प्रकार बनाता है

• ऊपर / नीचे: समद्विबाहु त्रिभुज ऊपर या नीचे की ओर इशारा करते, टूलटिप और एकॉर्डियन संकेतकों के लिए सबसे आम आकार।
• बाएँ / दाएँ: बाएँ या दाएँ इशारा करते, ब्रेडक्रंब और दाएँ-स्तंभ कॉलआउट के लिए उपयोग किए जाते हैं।
• ऊपर-बाएँ / ऊपर-दाएँ कोने: समकोण त्रिभुज जो किसी कंटेनिंग एलिमेंट के कोने में फ़िट होते हैं। रिबन-मोड़ और कोना-बैज प्रभावों के लिए उपयोग किए जाते हैं।
• नीचे-बाएँ / नीचे-दाएँ कोने: विपरीत कोनों के लिए समकोण त्रिभुज।
• कस्टम पहलू: गैर-समबाहु आकारों के लिए समायोज्य चौड़ाई-से-ऊँचाई अनुपात, जब लंबा संकीर्ण पॉइंटर या चौड़ा सपाट शेवरॉन चाहिए हो।

संबंधित टूल