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

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

यह ट्रिक इस तथ्य पर आधारित है कि बिना चौड़ाई और ऊँचाई वाला एक तत्व, मोटी बॉर्डर के साथ, बॉर्डर को एक नोक पर मिलता हुआ दिखाता है। दो बॉर्डर को पारदर्शी बनाकर और तीसरी को रंग देकर, वांछित दिशा में इशारा करता हुआ त्रिकोण मिलता है — टूलटिप तीर या सजावटी कर्सर के लिए किसी छवि या SVG की आवश्यकता नहीं है।

किसी छवि के बजाय इस ट्रिक का उपयोग क्यों करें?

शुद्ध CSS त्रिकोण को किसी नेटवर्क अनुरोध की आवश्यकता नहीं होती, यह पूरी तरह से आकार बदलता है और बिटमैप छवि या बाहरी SVG के विपरीत, CSS वेरिएबल के माध्यम से तुरंत रंग बदलता है।

क्या त्रिकोण का रंग या आकार एनिमेट किया जा सकता है?

हाँ, चूँकि ये मानक CSS गुण हैं (border-color, border-width), इन्हें transition या @keyframes के साथ किसी भी अन्य CSS गुण की तरह ट्रांज़िशन या एनिमेट किया जा सकता है।

100% स्थानीय प्रोसेसिंग: कोड पूरी तरह से आपके ब्राउज़र में WebAssembly के माध्यम से जनरेट होता है।