वेबसाइट डिजाइन करते समय सर्कल के बजाय सेमी-सर्कल जोड़ने से बेहतर लुक मिलता है। इसके अलावा, अर्धवृत्तों का निर्माण आसान होने के साथ-साथ दिलचस्प भी है।
इस लेख में, हम CSS का उपयोग करके सेमी-सर्कल बनाने के तरीके के बारे में एक गाइड प्रदान करेंगे।
CSS के साथ सेमी सर्कल कैसे बनाएं?
अर्धवृत्त बनाने के लिए, हम 'का उपयोग करेंगे' बॉर्डर-त्रिज्या ' संपत्ति। यह गुण हमें निम्नलिखित तरीकों से अर्धवृत्त बनाने में मदद करेगा:
- ऊपर से अर्धवृत्त
- नीचे से अर्धवृत्त
- बाएं से अर्धवृत्त
- दायीं ओर से अर्धवृत्त
आइए एक-एक करके विस्तृत करें!
उदाहरण 1: CSS के साथ ऊपर से एक सेमी सर्कल बनाएं
ऊपर से एक अर्धवृत्त बनाने के लिए, सबसे पहले, हम निर्दिष्ट करेंगे ' एचटीएमएल अब, डिव के लिए उपयुक्त आयाम सेट करें, जैसे कि हम ' चौड़ाई 'संपत्ति मूल्य' के रूप में 180px ' तथा ' कद 'मूल्य के साथ संपत्ति' गुणित 90px ' अगले चरण में, 'सेट करें' बॉर्डर-त्रिज्या ' संपत्ति मूल्य ' 12रेम 12रेम 0 0 '; जहां पहला अंक 12rem div के ऊपर बाईं ओर ट्रिम करेगा, दूसरा 12rem ऊपर दाईं ओर ट्रिम करेगा, तीसरा और चौथा अंक 0 डिव के सभी निचले हिस्से को काट देगा। अंत में, सर्कल को एक रंग देने के लिए, 'का उपयोग करें' पीछे का रंग 'मूल्य के साथ संपत्ति' बैंगनी ' सीएसएस HTML फ़ाइल को उल्लिखित कोड के साथ सहेजें और इसे अपने ब्राउज़र में खोलें: जैसा कि आप देख सकते हैं, हमने सफलतापूर्वक CSS बॉर्डर-त्रिज्या संपत्ति के साथ एक अर्ध-वृत्त बनाया है। नीचे से एक अर्धवृत्त बनाने के लिए, हम सीमा-त्रिज्या गुण मान 'के रूप में सेट करेंगे' 0 0 12रेम 12रेम ”, जहां पहले दो मान ऊपरी बाएँ और शीर्ष दाईं ओर की सीमा-त्रिज्या का प्रतिनिधित्व करते हैं। हमने डिव के शीर्ष आधे हिस्से को पूरी तरह से गायब करने के लिए उन्हें 0 पर सेट कर दिया है। नीचे के लिए, हमने मूल्यों को 12rem पर सेट करके केवल थोड़ा नीचे बाएँ और नीचे दाईं ओर ट्रिम किया है। सीएसएस उत्पादन CSS सेमी-सर्कल को दाईं ओर बनाने के लिए, पहले कंटेनर की ऊंचाई और चौड़ाई को समायोजित करें क्योंकि सर्कल का उचित आकार प्राप्त करना आवश्यक है। ठीक ' चौड़ाई ' जैसा ' गुणित 90px ' तथा ' कद ' जैसा ' 180px ' इस समय। फिर से, सीमा-त्रिज्या संपत्ति का उपयोग 'मूल्य के साथ करें' 0 12रेम 12रेम 0 ”, जहां पहला मान 0 ऊपर बाईं ओर है, अंतिम मान 0 नीचे बाईं ओर है, और दूसरा और तीसरा मान ऊपर दाईं ओर और नीचे दाईं ओर ट्रिम करने के लिए जोड़ा जाता है। इन मानों को लागू करने पर दाईं ओर से एक अर्धवृत्त बन जाएगा। सीएसएस उत्पादन इस बार, सीमा-त्रिज्या गुण को मान के साथ निर्दिष्ट करें ' 12रेम 0 0 12रेम '; पहला और अंतिम मान 12rem div के ऊपरी बाएँ और नीचे बाईं ओर ट्रिम करेगा, दूसरे और तीसरे मान को 0 पर सेट करने से सर्कल के ऊपर दाईं और नीचे दाईं ओर स्पष्ट हो जाएगा। आखिरकार, हमारा लेफ्ट साइडेड सेमी-सर्कल बन जाएगा। सीएसएस उत्पादन हमने CSS के साथ एक सेमी-सर्कल बनाने के लिए विभिन्न तरीकों की पेशकश की है। सेमी-सर्कल बनाने के लिए, हम बस CSS का उपयोग कर सकते हैं ” बॉर्डर-त्रिज्या ' संपत्ति। अर्ध-वृत्त को अगल-बगल से बनाया जा सकता है, जैसे कि बाएँ, दाएँ, ऊपर और नीचे। सीमा-त्रिज्या संपत्ति में, प्रारंभिक मान ऊपर बाईं ओर है, दूसरा शीर्ष दाईं ओर है, तीसरा नीचे दाईं ओर है, और चौथा मान नीचे बाईं ओर है। इस राइट-अप में समझाया गया है कि CSS के साथ सेमी-सर्कल कैसे बनाया जाता है।
चौड़ाई : 180px ;
कद : गुणित 90px ;
बॉर्डर-त्रिज्या : 12रेम 12रेम 0 0 ;
पीछे का रंग : बैंगनी ;
}
उदाहरण 2: CSS के साथ नीचे से एक सेमी सर्कल बनाएं
चौड़ाई : 180px ;
कद : गुणित 90px ;
बॉर्डर-त्रिज्या : 0 0 12रेम 12रेम ;
पीछे का रंग : बैंगनी ;
}
उदाहरण 3: CSS के साथ दाएं से एक अर्धवृत्त बनाएं
चौड़ाई : गुणित 90px ;
कद : 180px ;
बॉर्डर-त्रिज्या : 0 12रेम 12रेम 0 ;
पीछे का रंग : बैंगनी ;
}
उदाहरण 4: CSS के साथ बाईं ओर से एक अर्धवृत्त बनाएँ
चौड़ाई : गुणित 90px ;
कद : 180px ;
बॉर्डर-त्रिज्या : 12रेम 0 0 12रेम ;
पीछे का रंग : बैंगनी ;
}
निष्कर्ष