सीएसएस रिबन कैसे बनाएं

हमने भी सेट किया बुनियादी आयाम और यह पीछे का रंग सीएसएस के साथ.

 .कार्ड पृष्ठभूमि-रंग: बेज; ऊंचाई: 300 पीएक्स; मार्जिन: 40 पीएक्स; चौड़ाई: 500 पीएक्स;  

रिबन का मध्य भाग

हम एक का उपयोग करेंगे सीएसएस चर (हमें एक सीएसएस मूल्य को स्टोर करने और पुन: उपयोग करने की अनुमति देता है) जिसे कहा जाता है --पी सेवा मेरे पेडिंग वैल्यू स्टोर करें. का मूल्य गद्दी संपत्ति का उपयोग करता है वर (- पी) रिबन के बाएं और दाएं पैडिंग के लिए सिंटैक्स आसानी से चौड़ा. --पी चर बाद में होगा कई बार पुन: उपयोग किया; यह हमारे कोड को लचीला बनाता है.

 .रिबन --p: 15px; पृष्ठभूमि-रंग: आरजीबी (170,170,170); ऊंचाई: 60 पीएक्स; गद्दी: 0 var (- p); चौड़ाई: 100%;  

नीचे दिए गए स्क्रीनशॉट पर आप देख सकते हैं कि इस बिंदु पर आपका डेमो कैसा दिखना चाहिए:

रिबन को केन्द्रित करना

हमें भी करने की जरूरत है रिबन केंद्र. हम इसे गद्दी के आकार से बाईं ओर धकेलें (द्वारा चिह्नित --पी चर) सापेक्ष स्थिति का उपयोग करना.

 .रिबन --p: 15px; पृष्ठभूमि-रंग: आरजीबी (170,170,170); ऊंचाई: 60 पीएक्स; गद्दी: 0 var (- p); स्थिति: रिश्तेदार; दाईं ओर: var (- p); चौड़ाई: 100%;  

अद्यतन किया गया डेमो:

रिबन के किनारे

अब हम बनाते हैं रिबन के बाएँ और दाएँ पक्ष यह प्रतीत होता है कि कार्ड के किनारे के आसपास झुकना चाहिए। ऐसा करने के लिए, हम दोनों का उपयोग करते हैं : से पहले तथा :बाद के छद्म तत्व .फीता.

दोनों छद्म तत्वों की पृष्ठभूमि का रंग विरासत में मिला है .फीता, और हम उपयोग करते हैं फ़िल्टर: चमक (.5) उनके रंग को थोड़ा गहरा करने का नियम। वे भी बिल्कुल तैनात उनके (अपेक्षाकृत तैनात) माता-पिता के भीतर.

उनकी चौड़ाई की जरूरत है पैडिंग आकार के समान, और हम उन्हें जगह देते हैं रिबन के बाएं और दाएं छोर पर का उपयोग करते हुए बायां: 0 तथा सही: 0 शैली के नियम.

 .रिबन: पहले, .ribbon: पृष्ठभूमि-रंग: विरासत के बाद; सामग्री: "; प्रदर्शन: ब्लॉक; फिल्टर: चमक (.5); ऊंचाई: 100%; स्थिति: निरपेक्ष; चौड़ाई: var - (पी);। रिबन: बाएं से पहले: 0;;। रिबन: के बाद  सही: 0; 

अब हम नीचे जोड़े गए रिबन के साथ नीचे की तरह दिखते हैं:

किनारे तिरछे

रिबन के किनारे बनाने के लिए झुकना देखो, हमारे लिए आवश्यक है 45 ° से पक्षों को तिरछा करें. परिवर्तन: तिरछा () सीएसएस नियम skews तत्वों को लंबवत रूप से.

 .रिबन: बाएं: 0 से पहले; परिणत: skewy (45deg);  .ribbon: right: 0 के बाद; परिणत: skewy (-45deg);  

जैसा कि आप पक्षों के किनारों को देख सकते हैं संरेखित न करें परिवर्तन के बाद, इसलिए हमें इसकी आवश्यकता है उन्हें नीचे खींचो.

पक्षों को संरेखित करें

सेवा मेरे उचित लंबाई निर्धारित करें जिसके द्वारा हमें पक्षों को नीचे ले जाने की आवश्यकता होती है, हम त्रिकोणमिति की ओर मुड़ते हैं. हमें जो खोजने की जरूरत है, वह है एक्स, जैसा y पक्षों की चौड़ाई (के आकार के बराबर होती है) .फीता), और कोण θ 45 ° (तिरछा कोण) है.

जिसके परिणामस्वरूप एक्स फिर आधा करने की जरूरत है, के रूप में अच्छी तरह से एक बाएँ और दाएँ पक्ष हैं.

यदि आप किसी भी सीएसएस प्रीप्रोसेसर जाँच का उपयोग कर रहे हैं यदि यह ए तन फ़ंक्शन, अन्यथा एक स्पर्शरेखा चार्ट या एक कैलकुलेटर को देखें कोण के स्पर्शरेखा मूल्य का पता लगाएं. हम भाग्यशाली हैं तन 45 ° है 1, जिसका मतलब है कि का मूल्य एक्स बराबर है y हमारे मामले में.

 .रिबन: पहले, .ribbon: पृष्ठभूमि-रंग: विरासत के बाद; सामग्री: "; प्रदर्शन: ब्लॉक; फिल्टर: चमक (.5); ऊंचाई: 100%; स्थिति: निरपेक्ष; शीर्ष: कैल्क (var - (p) / 2); चौड़ाई: var (- पी);; 

जबसे एक्स आधा किया जाना था, हम का उपयोग करें calc () का विभाजन करने के लिए CSS कार्य करता है --पी परिवर्तनशील.

अंत में हमें जरूरत है Z- अक्ष के साथ पक्षों को संरेखित करें वैसे भी, तो चलो जोड़ते हैं z- इंडेक्स: -1 पक्षों पर शासन करने के लिए उन्हें रिबन के मध्य भाग के पीछे रखें.

 .रिबन: पहले, .ribbon: पृष्ठभूमि-रंग: विरासत के बाद; सामग्री: "; प्रदर्शन: ब्लॉक; फिल्टर: चमक (.5); ऊंचाई: 100%; स्थिति: निरपेक्ष; शीर्ष: कैल्क (var - (p) / 2); चौड़ाई: var (- p); z- सूचकांक: -1; 

अब जब हम पक्षों को जोड़ते हैं, तो हमारी सीएसएस रिबन किया जाता है.

नीचे आप लाइव डेमो को फिर से देख सकते हैं, कृपया ध्यान दें कि यह कुछ अतिरिक्त स्टाइलिंग का भी उपयोग करता है.