सीएसएस त्रिकोण छाया के साथ

सबसे अधिक संभावना है, आप पहले से ही जानते हैं कि सीमा संपत्ति का उपयोग करके शुद्ध सीएसएस में एक त्रिकोण कैसे बनाया जाए। यदि आप नहीं जानते हैं, तो आप पढ़ सकते हैं, उदाहरण के लिए, यहां । लेकिन क्या होगा अगर आपको छाया के साथ त्रिकोण की आवश्यकता है?



एक सीमा के साथ शास्त्रीय हेरफेर एक वस्तु के आकार को बदल नहीं सकता है, यह सिर्फ एक दृश्य धोखा है।
यानी आप ऐसे त्रिभुज में सिर्फ बॉक्स-शैडो नहीं डाल सकते हैं, क्योंकि हमें ऐसा कुछ मिलता है:



आइए कुछ वैकल्पिक समाधानों को देखें।

यूनिकोड का उपयोग करना

यूनिकोड वर्णों में, कई त्रिभुज हैं। उदाहरण के लिए:

▲ ▲

यहां और विकल्प खोजें।
यदि आप एक त्रिकोण के इस विकल्प का उपयोग करते हैं, तो इसके साथ आप सभी प्रकार की मजेदार चीजें कर सकते हैं

<span class="triangle">▲</span> 

 .triangle { color: #BADA55; text-shadow: 0 0 20px black; } 

यानी रंग, छाया, आकार, सब कुछ आपकी पसंद है। इसके अलावा, यदि त्रिकोण का आकार आपको सूट नहीं करता है, तो आप इसे खींचने या घुमाने के लिए CSS3 के परिवर्तनों का उपयोग कर सकते हैं।

 .triangle { display: inline-block; transform: scaleX(2.5); /*     */ color: #BADA55; text-shadow: 0 2px 2px rgba(255,255,255,0.7), 0 10px 4px rgba(0,0,0,0.5); font-size: 32px; } 

एक उदाहरण से लिंक करें

मुझे यह तकनीक पसंद है, लेकिन इसमें कई समस्याएं हैं, और मुख्य एक ब्राउज़र द्वारा CSS3 के परिवर्तनों का कमजोर समर्थन है। विशेष रूप से IE8 में। हालांकि दूसरी ओर, यह लेख छाया के बारे में है, इसलिए हमें वैसे भी CSS3 की आवश्यकता है। इसके अलावा, पुराने ब्राउज़र में यूनिकोड आइकन के साथ समस्याएँ हो सकती हैं।

डबल बॉक्स विधि

CSS3 को एक अच्छे स्तर पर जानते हुए, आप एक अन्य विधि का उपयोग कर सकते हैं, जो अतिप्रवाह के साथ एक कंटेनर का उपयोग करता है: अंदर एक और कंटेनर के साथ छिपा हुआ है, जिसे बाहरी द्वारा 45 डिग्री से घुमाया जाता है। इस प्रकार, दृश्य भाग हमारा त्रिकोण होगा। अब आप दोनों कंटेनरों के लिए बॉक्स-शैडो का उपयोग कर सकते हैं ताकि उनमें छाया मिल सके और वांछित प्रभाव को प्राप्त किया जा सके।

 <div class="triangle"></div> 

 .triangle-with-shadow { width: 100px; height: 100px; position: relative; overflow: hidden; box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5); } .triangle-with-shadow:after { content: ""; position: absolute; width: 50px; height: 50px; background: #999; transform: rotate(45deg); /*     */ top: 75px; left: 25px; box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5); } 

कृपया ध्यान दें कि मूल खंड के लिए ऋणात्मक त्रिज्या मान का उपयोग किया जाता है, इस प्रकार केवल एक तरफ एक छाया का निर्माण होता है।
एक उदाहरण से लिंक करें

बस छवि का उपयोग करें।

मैं इस पद्धति का बहुत बड़ा प्रशंसक नहीं हूं, क्योंकि यह या तो अतिरिक्त HTTP अनुरोध है, या स्प्राइट के साथ अतिरिक्त जोड़तोड़ है। इसके अलावा, एक साधारण छवि उत्तरदायी डिजाइन के लिए बहुत उपयुक्त नहीं है - स्केलिंग के साथ समस्याएं, साथ ही पिक्सेल में वृद्धि पिक्सेल घनत्व के साथ डिस्प्ले पर दिखाई देगी। उसी समय, पहली दो तकनीकें आपको त्रिकोण वस्तुओं को वेक्टर ऑब्जेक्ट्स के रूप में हेरफेर करने की अनुमति देती हैं - बिना किसी पिक्सेल के।

इंटरनेट एक्सप्लोरर पहले दो तकनीकों के उपयोग पर कुछ प्रतिबंध लगाते हुए, पहियों में लाठी चलाना जारी रखता है, लेकिन कोई भी हमें मोबाइल साइटों के लेआउट में उपयोग करने के लिए परेशान नहीं करता है।

अतिरिक्त विकल्प: कैनवास का उपयोग करें

यहां आपको CSS से परे जाना होगा, लेकिन यह तकनीक काफी आशाजनक भी है।

 <canvas id="triangle" height="50" width="50">Triangle</canvas> 

 var canvas = document.getElementById('triangle'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(10, 25); context.lineTo(40, 10); context.lineTo(40, 40); context.lineTo(10, 25); context.closePath(); context.shadowColor = "rgba(0, 0, 0, 0.4)"; context.shadowBlur = 7; context.shadowOffsetX = 2; context.shadowOffsetY = 5; context.fillStyle = "rgba(132, 28, 255, 0.8)"; context.fill(); 

एक उदाहरण से लिंक करें