सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें
बग रिपोर्ट करें

डिज़ाइन · लोकल उपयोगिता

CSS त्रिभुज जनरेटर

CSS Triangle Generator

दिशा, साइज़ और रंग चुनकर सिर्फ़ CSS वाले त्रिभुज बनाएँ; प्रीव्यू जाँचें और कोड कॉपी या डाउनलोड करें — किसी इमेज या आइकन फ़ॉन्ट की ज़रूरत नहीं।

टास्क पथ / इनपुट से परिणाम तक

दिशा चुनें

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

CSS त्रिभुज जनरेटर कैसे काम करता है, निजता और संबंधित टूल

टास्क पथ / इनपुट से परिणाम तक

CSS त्रिभुज कैसे बनाएं

  1. 01

    दिशा चुनें

    दिशा के नीचे ऊपर, दाएं, नीचे या बाएं चुनें। पूर्वावलोकन तुरंत अपडेट होता है — तकनीक एक बॉर्डर को रंगती है और पड़ोसी बॉर्डरों को पारदर्शी रखती है। वर्कस्पेस ऊपर की ओर इशारा करते त्रिभुज से शुरू होता है।

  2. 02

    साइज़ सेट करें

    आधार चौड़ाई और त्रिभुज ऊंचाई को 8 से 180 px तक, 1 px के चरणों में सेट करें। ऊपर/नीचे दिशा में चौड़ाई आधार और ऊंचाई नोक तक की दूरी है। बाएं/दाएं दिशा में ऊंचाई लंबवत आधार और चौड़ाई क्षैतिज दूरी है। डिफ़ॉल्ट आकार क्षैतिज 72 px और लंबवत 64 px है।

  3. 03

    भरने का रंग चुनें

    भरण रंग को किसी छह-अंकीय hex मान पर सेट करें — डिफ़ॉल्ट #0f4cff है। लाइव पूर्वावलोकन और बना हुआ border-color डिक्लेरेशन हमेशा तालमेल में रहते हैं, इसलिए जो आप देखते हैं, ठीक वही कॉपी होता है।

  4. 04

    पूर्वावलोकन स्थिति जांचें

    लाइव पूर्वावलोकन हर बदलाव पर फिर से रेंडर होता है और सभी मान रेंज में होने पर स्थिति बैज मान्य CSS पढ़ता है। रेंज से बाहर का मान उसे मान जांचें पर पलट देता है और हाइलाइट किया गया कंट्रोल ठीक होने तक कॉपी व डाउनलोड रोक देता है।

  5. 05

    नमूना प्रीसेट आज़माएं

    नमूना लोड करें से दाईं ओर इशारा करता त्रिभुज मिलता है: क्षैतिज विस्तार 104 px, लंबवत आधार 86 px और भरण #ffd11a। रीसेट डिफ़ॉल्ट वापस लाता है।

  6. 06

    CSS कॉपी या डाउनलोड करें

    .triangle नियम को क्लिपबोर्ड पर कॉपी करने के लिए CSS कॉपी करें दबाएं, या उसे toolars-triangle.css के रूप में सहेजने के लिए .css डाउनलोड करें। नियम चौड़ाई और ऊंचाई शून्य पर सेट करता है और चारों बॉर्डर घोषित करता है, किसी भी स्टाइलशीट में पेस्ट करने के लिए तैयार।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS त्रिभुज जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS त्रिभुज जनरेटर असल में क्या करता है

ड्रॉपडाउन कैरेट, टूलटिप पॉइंटर और ब्रेडक्रंब सेपरेटर — सबको छोटा, साफ़ त्रिभुज चाहिए, और इमेज फ़ाइल इसके लिए गलत औज़ार है: वह हाई-डेंसिटी स्क्रीन पर धुंधली हो जाती है और पेज में एक रिक्वेस्ट जोड़ती है। CSS बॉर्डर से बना त्रिभुज रिज़ॉल्यूशन-स्वतंत्र होता है और एक hex मान से रंग बदल लेता है। CSS त्रिभुज जनरेटर दिशा, साइज़ और भरण ट्यून करते समय आकृति को लोकल रूप से रेंडर करता है, इसलिए दोहराव में सेकंड लगते हैं। सही दिखने पर एक क्लिक तैयार .triangle नियम को आपके क्लिपबोर्ड पर रख देता है।

आम सवाल

शुद्ध-CSS त्रिभुज कैसे काम करता है?
एलिमेंट को शून्य चौड़ाई और ऊंचाई के साथ चार बॉर्डर मिलते हैं। एक बॉर्डर रंगते समय दो पड़ोसी बॉर्डर पारदर्शी रहने से साफ़ त्रिभुज बचता है — बना हुआ .triangle नियम ठीक दिखाता है कि आपकी चुनी दिशा के लिए कौन सा बॉर्डर भरण रंग ले जाता है, और नोक के विपरीत बॉर्डर शून्य पर सिकुड़ जाता है।
मैं किस साइज़ तक बना सकता/सकती हूँ?
आधार चौड़ाई और त्रिभुज ऊंचाई दोनों 1 px के चरणों में 8 से 180 px के मान स्वीकार करते हैं। रेंज से बाहर का मान पूर्वावलोकन स्थिति को मान जांचें पर पलट देता है और हाइलाइट किया गया कंट्रोल ठीक होने तक कॉपी या डाउनलोड रोक देता है, इसलिए एक्सपोर्ट किया गया नियम हमेशा मान्य रहता है।
क्या त्रिभुज हमेशा सममित होता है?
हां। ऊपर और नीचे के लिए, दोनों पारदर्शी साइड बॉर्डर आधार चौड़ाई का आधा-आधा लेते हैं, इसलिए शीर्ष आधार के ऊपर केंद्रित रहता है; बाएं और दाएं के लिए, ऊपरी और निचला बॉर्डर ऊंचाई को उसी तरह बांटते हैं। हर बना त्रिभुज समद्विबाहु होता है — तिरछी या समकोण आकृतियों के लिए clip-path जैसी दूसरी तकनीक चाहिए।
बाद में त्रिभुज का रंग या साइज़ कैसे बदलूं?
बने हुए नियम को सीधे संपादित करें: सिर्फ़ एक बॉर्डर भरण रंग ले जाता है, दो पड़ोसी बॉर्डर पारदर्शी होते हैं, और नोक के विपरीत बॉर्डर शून्य होता है। अकेला hex मान बदलने से रंग बदल जाता है, और बॉर्डर चौड़ाई समायोजित करने से आकृति — पहली कॉपी के बाद किसी जनरेटर की ज़रूरत नहीं।
क्या आउटपुट हर ब्राउज़र में काम करेगा?
हां। बॉर्डर-आधारित त्रिभुज CSS की सबसे पुरानी तकनीकों में से एक है और न इमेज, न SVG, न clip-path सपोर्ट मांगती है, इसलिए बना हुआ नियम हर आधुनिक ब्राउज़र में, किसी भी स्क्रीन डेंसिटी पर, बिना एक भी नेटवर्क रिक्वेस्ट के एक जैसा रेंडर होता है।
क्या कुछ अपलोड या स्टोर होता है?
नहीं। पूर्वावलोकन मान्य स्टाइल मानों से लोकल रूप से रेंडर होता है, और जैसा वर्कस्पेस फ़ूटर बताता है, कोई बना हुआ मान स्टोरेज, लॉग, एनालिटिक्स या नेटवर्क में नहीं जाता।

डिज़ाइन में जारी रखें

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

CSS लोडिंग एनिमेशन जनरेटर

CSS Loader Generator

लोडिंग स्पिनर की स्टाइल, फ़्रेम साइज़, स्ट्रोक, रफ़्तार और रंग विज़ुअली सेट करें; तैयार CSS कॉपी या डाउनलोड करें और सीधे अपने मार्कअप में जोड़ें।

बनाएँ

CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

कस्टम चेकबॉक्स का साइज़, फ़्रेम और दोनों स्टेट के रंग डिज़ाइन करें, चुनी और बिना चुनी हालत प्रीव्यू करें और नेटिव मार्कअप के साथ CSS कॉपी करें।

बनाएँ

CSS टॉगल स्विच जनरेटर

CSS Switch Generator

सिर्फ़ CSS वाले टॉगल स्विच का ट्रैक, थंब और दोनों स्टेट के रंग सेट करें, ट्रांज़िशन प्रीव्यू करें और मार्कअप समेत पूरा कोड कॉपी या डाउनलोड करें।

बनाएँ

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

CSS Clip Path Generator

खींचकर, कीबोर्ड या निर्देशांक से बिंदु संपादित करें। चार प्रीसेट से शुरू करके clip-path घोषणा या पूरा CSS स्थानीय रूप से कॉपी करें।

बनाएँ